Developer Blog

Tipps und Tricks für Entwickler und IT-Interessierte

Docker

Docker | Create an extensible build environment

Inhaltsverzeichnis

TL;DR

The complete code for the post is here.

General Information

Building a Docker image mainly means creating a Dockefile and specifying all the required components to install and configure.

So a Dockerfile contains at least many operating system commands for installing and configuring software and packages.

Keeping all commands in one file (Dockerfile) can lead to a confusing structure.

In this post I describe and explain an extensible structure for a Docker project so that you can reuse components for other components.

General Structure

The basic idea behind the structure is: split all installation instructions into separate installation scripts and call them individually in the dockerfile.

In the end the structure will look something like this (with some additional collaborators to be added and described later)

RUN bash /tmp/${SCRIPT_UBUNTU}
RUN bash /tmp/${SCRIPT_ADD_USER}
RUN bash /tmp/${SCRIPT_NODEJS}
RUN bash /tmp/${SCRIPT_JULIA}
RUN bash /tmp/${SCRIPT_ANACONDA}
RUN cat ${SCRIPT_ANACONDA_USER} | su user
RUN bash /tmp/${SCRIPT_CLEANUP}

For example, preparing the Ubuntu image by installing basic commands is transfered into the script 01_ubuntu_sh

Hint: There are hardly any restrictions on the choice of names (variables and files/scripts). For the scripts, I use numbering to express order.

The script contains this code:

apt-get update                                       
apt-get install --yes apt-utils
apt-get install --yes build-essential lsb-release curl sudo vim python3-pip

echo "root:root" | chpasswd

Since we will be working with several scripts, an exchange of information is necessary. For example, one script installs a package and the other needs the installation folder.

We will therefore store information needed by multiple scripts in a separate file: the environment file environment

#--------------------------------------------------------------------------------------
USR_NAME=user
USR_HOME=/home/user

GRP_NAME=work

#--------------------------------------------------------------------------------------
ANACONDA=anaconda3
ANACONDA_HOME=/opt/$ANACONDA
ANACONDA_INSTALLER=/tmp/installer_${ANACONDA}.sh

JULIA=julia
JULIA_HOME=/opt/${JULIA}-1.7.2
JULIA_INSTALLER=/tmp/installer_${JULIA}.tgz

And each installation script must start with a preamble to use this environment file:

#--------------------------------------------------------------------------------------
# get environment variables
. environment

Preparing Dockerfile and Build Environment

When building an image, Docker needs all files and scripts to run inside the image. Since we created the installation scripts outside of the image, we need to copy them into the image (run run them). This also applies to the environment file environment.

File copying is done by the Docker ADD statement.

First we need our environment file in the image, so let’s copy this:

#======================================================================================
FROM ubuntu:latest as builder

#--------------------------------------------------------------------------------------
ADD environment environment

Each block to install one required software looks like this. To be flexible, we use variable for the script names.

ARG SCRIPT_UBUNTU=01_ubuntu.sh
ADD ${SCRIPT_UBUNTU}    /tmp/${SCRIPT_UBUNTU}
RUN bash tmp/${SCRIPT_UBUNTU}

Note: We can’t run the script directly because the run bit may not be set. So we will use bash to run the text file as a script.

As an add-on, we will be using Docker’s multi-stage builds. So here is the final code:

#--------------------------------------------------------------------------------------
# UBUNTU CORE
#--------------------------------------------------------------------------------------
FROM builder as ubuntu_core
ARG SCRIPT_UBUNTU=01_ubuntu.sh
ADD ${SCRIPT_UBUNTU}    /tmp/${SCRIPT_UBUNTU}
RUN bash 

Final results

Dockerfile

Here is the final Dockerfile:

#==========================================================================================
FROM ubuntu:latest as builder

#------------------------------------------------------------------------------------------
# 
#------------------------------------------------------------------------------------------
ADD environment environment
#------------------------------------------------------------------------------------------
# UBUNTU CORE
#------------------------------------------------------------------------------------------
FROM builder as ubuntu_core
ARG SCRIPT_UBUNTU=01_ubuntu.sh
ADD ${SCRIPT_UBUNTU}    /tmp/${SCRIPT_UBUNTU}
RUN bash                /tmp/${SCRIPT_UBUNTU}

#------------------------------------------------------------------------------------------
# LOCAL USER
#------------------------------------------------------------------------------------------
ARG SCRIPT_ADD_USER=02_add_user.sh
ADD ${SCRIPT_ADD_USER}  /tmp/${SCRIPT_ADD_USER}
RUN bash /tmp/${SCRIPT_ADD_USER}

#------------------------------------------------------------------------------------------
# NODEJS
#-----------------------------------------------------------------------------------------
FROM ubuntu_core as with_nodejs

ARG SCRIPT_NODEJS=10_nodejs.sh
ADD ${SCRIPT_NODEJS}    /tmp/${SCRIPT_NODEJS}
RUN bash                /tmp/${SCRIPT_NODEJS}

#--------------------------------------------------------------------------------------------------
# JULIA
#--------------------------------------------------------------------------------------------------
FROM with_nodejs as with_julia

ARG SCRIPT_JULIA=11_julia.sh
ADD ${SCRIPT_JULIA} /tmp/${SCRIPT_JULIA}
RUN bash /tmp/${SCRIPT_JULIA}

#---------------------------------------------------------------------------------------------
# ANACONDA3  with Julia Extensions
#---------------------------------------------------------------------------------------------
FROM with_julia as with_anaconda

ARG SCRIPT_ANACONDA=21_anaconda3.sh
ADD ${SCRIPT_ANACONDA} /tmp/${SCRIPT_ANACONDA}
RUN bash /tmp/${SCRIPT_ANACONDA}

#---------------------------------------------------------------------------------------------
#
#---------------------------------------------------------------------------------------------
FROM with_anaconda as with_anaconda_user
ARG SCRIPT_ANACONDA_USER=22_anaconda3_as_user.sh
ADD ${SCRIPT_ANACONDA_USER} /tmp/${SCRIPT_ANACONDA_USER}
#RUN cat ${SCRIPT_ANACONDA_USER} | su user

#---------------------------------------------------------------------------------------------
#
#---------------------------------------------------------------------------------------------
FROM with_anaconda_user as with_cleanup

ARG SCRIPT_CLEANUP=99_cleanup.sh
ADD ${SCRIPT_CLEANUP} /tmp/${SCRIPT_CLEANUP}
RUN bash /tmp/${SCRIPT_CLEANUP}

#=============================================================================================
USER    user
WORKDIR /home/user

#
CMD ["bash"]

Makefile

HERE := ${CURDIR}

CONTAINER := playground_docker

default:
	cat Makefile

build:
	docker build -t ${CONTAINER} .

clean:
	docker_rmi_all
	
run:
	docker run  -it --rm  -p 127.0.0.1:8888:8888 -v ${HERE}:/src:rw -v ${HERE}/notebooks:/notebooks:rw --name ${CONTAINER} ${CONTAINER}

notebook:
	docker run  -it --rm  -p 127.0.0.1:8888:8888 -v ${HERE}:/src:rw -v ${HERE}/notebooks:/notebooks:rw --name ${CONTAINER} ${CONTAINER} bash .local/bin/run_jupyter

Installation scripts

01_ubuntu.sh

#--------------------------------------------------------------------------------------------------
# get environment variables
. environment

#--------------------------------------------------------------------------------------------------
export DEBIAN_FRONTEND=noninteractive
export TZ='Europe/Berlin'

echo $TZ > /etc/timezone 

apt-get update                                       
apt-get install --yes apt-utils

#
apt-get -y install tzdata

rm /etc/localtime
ln -snf /usr/share/zoneinfo/$TZ /etc/localtime
dpkg-reconfigure -f noninteractive tzdata

#
apt-get install --yes build-essential lsb-release curl sudo vim python3-pip

#
echo "root:password" | chpasswd

Angular | Starting with Capacitor

Inhaltsverzeichnis

Introduction

Install Angular

$ npm -g install @angular/cli

Create sample app

❯ ng new app-capacitor
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss]

❯ cd app-capacitor

Change output path to capacitor defaults

Change line in angular.json

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",

 Add capacitor support

❯ ng add @capacitor/angular
ℹ Using package manager: npm
✖ Unable to find compatible package.  Using 'latest'.
✖ Package has unmet peer dependencies. Adding the package may not succeed.

The package @capacitor/angular will be installed and executed.
Would you like to proceed? Yes

Capacitor initialisieren

❯ npx cap init
[?] What is the name of your app?
    This should be a human-friendly app name, like what you'd see in the App Store.
√ Name ... app-capacitor
[?] What should be the Package ID for your app?
    Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique identifiers for apps. They must be in
    reverse domain name notation, generally representing a domain name that you or your company owns.
√ Package ID ... com.example.app
√ Creating capacitor.config.ts in D:\CLOUD\Online-Seminare\Kurse\Angular\Einsteiger\App_Capacitor in 5.31ms
[success] capacitor.config.ts created!

Next steps:
https://capacitorjs.com/docs/v3/getting-started#where-to-go-next
[?] Join the Ionic Community! 💙
    Connect with millions of developers on the Ionic Forum and get access to live events, news updates, and more.
√ Create free Ionic account? ... no
[?] Would you like to help improve Capacitor by sharing anonymous usage data? 💖
    Read more about what is being collected and why here: https://capacitorjs.com/telemetry. You can change your mind at
    any time by using the npx cap telemetry command.
√ Share anonymous usage data? ... no

Build your app

We will need the dist directory with the web files

❯ ng build --prod
Option "--prod" is deprecated: No need to use this option as this builder defaults to configuration "production".
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.b633c9096acdb457c421.js      | main          | 212.34 kB
polyfills.e4574352eda6eb439793.js | polyfills     |  35.95 kB
runtime.d66bb6fe709ae891f100.js   | runtime       |   1.01 kB
styles.31d6cfe0d16ae931b73c.css   | styles        |   0 bytes

                                  | Initial Total | 249.29 kB

Build at: 2021-05-28T09:32:28.905Z - Hash: ed2ed2d661b0d58b48f2 - Time: 28225ms
❯ npm install @capacitor/ios @capacitor/android
npm WARN @capacitor/angular@1.0.3 requires a peer of rxjs@~6.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @capacitor/angular@1.0.3 requires a peer of typescript@~3.4.3 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @capacitor/ios@3.0.0
+ @capacitor/android@3.0.0
added 2 packages from 1 contributor, removed 1 package and audited 1375 packages in 7.385s

88 packages are looking for funding
  run `npm fund` for details

found 35 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Add Platform Android

❯ npx cap add android
√ Adding native android project in android in 167.07ms
√ Syncing Gradle in 1.45ms
√ add in 169.83ms
[success] android platform added!
Follow the Developer Workflow guide to get building:
https://capacitorjs.com/docs/v3/basics/workflow
√ Copying web assets from dist to android\app\src\main\assets\public in 55.26ms
√ Creating capacitor.config.json in android\app\src\main\assets in 3.50ms
√ copy android in 164.93ms
√ Updating Android plugins in 7.76ms
√ update android in 75.79ms

Open Android Studio to build App

❯ npx cap open android
[info] Opening Android project at: android.

Laravel | Erstellen eines Blade Layouts

Inhaltsverzeichnis

TL;DR

Der Code für die in diesem Post erstelle Anwendung liegt hier.

Einrichten der Starter-App

Erstellen der Starter App. In diesem Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchführen können.

Sie können auch direkt mit dem dazugehörigen Repository starten:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App App
❯ cd App
❯ composer install
❯ npm install
❯ npm run build
❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate
❯ php artisan serve

Motivation

Betrachten wir die Dashboard-Seite der Starter-App: dashboard.blade.php. Es fällt auf, das nur der eigentliche Inhalt definiert wird (z. B. der Willkommens-Text in Zeile 11). Das eigentliche “Aussehen” (Layout) wird abgeleitet von dem generellen App-Layout. Dies wird durch die folgende erste Zele erreicht:

<x-app-layout>

Wir wollen Seiten entwicklen, die ein unterschiedliches Aussehen haben. Daher wollen wir neben dem generellen App-Layout noch weitere Layouts erstellen.

Ein weiteres Layout soll z. B. eine Seitenleiste erhalten, wir wollen es AppSidebarLayout nennen.

Verwendet wird es dann, wenn als erste Zeile die folgende verwendet wird:

<x-app-sidebar-layout>

Neue Seite erstellen

Im ersten Schritt erstellen wir zuerst eine neue Seite

Blade-Datei für neue Seite erstellen

Kopieren sie die Datei dashboard.blade.php nach page_with_sidebar.blade.php.

Löschen sie den Aufruf des Willkommens-Text in Zeile 11:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
            </div>
        </div>
    </div>
</x-app-layout>

Navigationsleiste erweitern

Erstellen Sie einen weiteren Navigationslink in der Datei resources/views/navigation-menu.blade.php:

<x-nav-link href="{{ route('page_with_sidebar') }}" :active="request()->routeIs('page_with_sidebar')">
    {{ __('Page with Sidebar') }}
</x-nav-link>

Wenn Sie jetzt die Seite aufrufen, dann bekommen Sie einen Fehler: die Route wurde nicht gefunden

Routing hinzufügen

Erweitern Sie die Datei routes/web.php und die neue Route:

 Route::get('/page_with_sidebar', function () {
        return view('page_with_sidebar');
 })->name('page_with_sidebar');

Ergebnis

So sieht dann unsere Seite aus:

Neues Layout verwenden

Nun ändern wir das Layout unserer neuen Seite in Zeile 1 und Zeile 14

<x-app-sidebar-layout>

Wenn Sie jetzt alles speichern und die Seite aktualisieren (im Browser) bekommen sie wie zu Erwarten eine Fehlermeldung:

Lassen Sie uns also das neue Layout erstellen.

Neues Layout erstellen

Kopieren der Datei resources/views/layouts/app.blade.php nach resources/views/layouts/app_with_sidebar.php.

Laravel | Arbeiten mit PowerGrid

Inhaltsverzeichnis

TL;DR

Der Code für die in diesem Post erstelle Anwendung liegt hier.

Einrichten der Starter-App

Erstellen der Starter App.

Sie können dazu dieses Kommando verwenden:

❯ laravel new site --jet --teams --api --pest --dark --database sqlite --stack livewire --verification --git

Dieser Post arbeitet mit der hier beschriebenen StarterApp. Der Post beschreibt, wie eine Starter-App erstellt und die grundlegenden Anpassungen durchgeführt werden. Sie können auch direkt mit dem dazugehörigen Repository starten:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App Laravel_Tutorial_Arbeiten-mit-PowerGrid
❯ Laravel_Tutorial_Arbeiten-mit-PowerGrid
❯ composer install
❯ npm install
❯ npm run build
❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate
❯ php artisan serve

Installation

1. via Composer

composer require power-components/livewire-powergrid

2. Konfigurationsdatei bereitstellen

php artisan vendor:publish --tag=livewire-powergrid-config

Die erstelle Konfigurationsdatei liegt hier: config/livewire-powergrid.php.

3. Views und Sprachdateien bereitstellen (Optional)

Hinweis: Überspringen sie diesen Schritt, wenn die keine Anpassung der Views durchführen wollen.

Views bereitstellen:

php artisan vendor:publish --tag=livewire-powergrid-views

Sprachdateien bereitstellen:

php artisan vendor:publish --tag=livewire-powergrid-lang

Laravel | Erstellen einer Blade Komponente

Inhaltsverzeichnis

TL;DR

Der Code für die in diesem Post erstelle Anwendung liegt hier.

Einrichten der Starter-App

Erstellen der Starter App. In diesem Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchführen können.

Sie können auch direkt mit dem dazugehörigen Repository starten:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App Laravel_Tutorial_Arbeiten-mit-htmx
❯ composer install
❯ npm install
❯ npm run build
❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate
❯ php artisan serve

Motivation

Betrachten wir sie Startseite der Starterapp: welcome.blade.php. Es fällt auf, das es viele Code-Wiederholungen gibt, z. B bei den Überschriften

1013: <h2 class="text-xl font-semibold text-black dark:text-white">Laracasts</h2>
1047: <h2 class="text-xl font-semibold text-black dark:text-white">Laravel News</h2>
1077: <h2 class="text-xl font-semibold text-black dark:text-white">Vibrant Ecosystem</h2>

Nicht nur, das mehrfach den gleichen Code geschrieben wurde, auch bei Änderungen muss an mehreren Stellen geändert werden.

Dabei sollte aus Designer-Sicht das Layout oder Aussehend der Seite aus “logischen” Bestandteilen bestehen, z. B. einer Überschrift, einer Kopfzeile, einen Textabschnitt.

Das aussehen dieser Bestandteile wird dann an andere Stelle festgelegt, aber jeder dieser Bestandteile hat das gleiche Aussehen.

Unsere Startseite würde dann vielleicht so aussehen:

<starter-header>Laracasts</starter-header>
<starter-header>Laravel News</starter-header>
<starter-header>Vibrant Ecosystem</starter-header>

Fügen wird diesen Bestandteile auch noch Parameter hinzu, so vereinfacht sich die Startseite so:

<starter-header title="Laracasts"/>
<starter-header title"Laravel News" />
<starter-header title="Vibrant Ecosystem" />

Um dies zu implementieren, setzen wir Blade Komponenten ein.

Hinweis: Der Begriff Blade kommt ihnen vielleicht bekannt vor. Sie haben ihn bestimmt schon in den Dateinamen gesehen:

welcome.blade.php

Was ist Blade.

Die Projektseite formuliert es so:

Blade is the simple, yet powerful templating engine that is included with Laravel.

Oder, wie Wikipedia es formuliert:

Funktional erweiterbare Templating-Sprache zur Erstellung von Views.

Blade ist Funktional erweiterbare Templating-Sprache zur Erstellung von Views..
Eine Template-Engine (von englisch für Vorlage bzw. Schablone und Maschine) ist eine Software, die eine Vorlagen-Datei (engl. Template) verarbeitet und bestimmte Platzhalter darin ähnlich wie bei einem Formular durch jeweils aktuelle Inhalte ersetzt. 

Unsere Blade besteht also nicht nur aus grafischen Elementen, z. B. Text, Icon, Auswahlbox. Sondern auch aus Programmkomponenten um diese Seite mit dynamischen Werten zu füllen.

Bezogen auf unser Beispiel des <starter-header> besteht der dynamische Teil aus dem tatächlich anzuzeugendem Text. Dadurch kann diese Komponente an beliebiger Stelle eingesetzt werden und jedesmal einen anderen Text darstellen, immer mit dem gleichen Aussehen.

Erstellen wir also unsere erste Komponente.

Blade Komponente erstellen

Wir erstellen eine Komponente mit dem nachfolgenden Kommando:

❯ php artisan make:component StarterHeader

Dadurch werden zwei neue Dateien erstellt:

  • resources/views/components/starter-header.blade.php
    In dieser Datei wird das Aussehen der Komponente festgelegt, Dabei können zusätzlich “Variablen” (also die dynamischen Teile) verwende werden.
  • app/View/Components/StarterHeader.php
    Diese ist die zum Blade-View zugehöroge PHP-Klasse. In dieser Daten wird die Verbindung zwischen dem Komponentennamen (starter-header) und dem dazugehörigen View definiert. Zusätzlich werden hier auch die dynamischen Teile festgelegt, also die Parameter für unsere Komponente (im Beispiel “title”)

Blade Komponente konfigurieren

PHP Klasse: app/View/Components/StarterHeader.php

Betrachten wird im ersten Schritt die PHP Klasse der Komponente: app/View/Components/StarterHeader.php

  • Der Name der Klasse in Zeile 9: StarterHeader
  • Den dazugehörigen Blade-View in Zeile 24: components.starter-header

Fügen wir nun einen Parameter für unsere Komponente hinzu: title

    public $title;

    public function __construct($title = 'Header')
    {
        $this->title = $title;
    }

Wird in einer Blade-Seite einen Komponenten verwendet, so wird der Konstruktor (__construct) dieser Komponente aufgerufen, um den notwendigen Programmcode zu erstellen.

Die beim Aufruf angegebene Parameter werden diesem Konstruktor übergeben.

Der Aufruf:

<starter-header title=Laravel" />

führt zu einem Aufruf des Konstruktor __construct("Laravel"). Der Parameter $title wird dabei durch den angegebene Wert "Laravel" ersetzt.

Blade View: resources/views/components/starter-header.blade.php

Betrachten wir nun den Blade-View in der Datei resources/views/components/starter-header.blade.php:

Der View hat noch sehr wenig Inhalt. Wir ersetzen nun den vorhandenen Inhalt mit dem Inhalt aus der Datei welcome.blade.php, der für die Formatierung und Darstellung es Headers verwendet wird:

Wir sehen zwei Header: in Zeile 1013 und in Zeile 1047. Beide beinhalten die gleichen HTML-Anweisungen und unterscheiden sich nur im Text des Headers:

<h2 class="text-xl font-semibold text-black dark:text-white">Laracasts</h2>

Wir kopieren also diese Anweisungen in unseren Blade-View. Dabei ersetzen wir gleichzeitig den (statischen) Text, z. B. Laracast, durch unsere Variable $title, die den gewüscnhten Titel enthält.

Hinweis: Damit Blade erkenne kann, wann HTML Code verwendet wird und wann Programmcode, wird dieser durch die Zeichen {{ und }} umschlossen.

In unserer Seite welcome.blade.php können wir nun die Komponente einsetzen und den vorhandenen Text ersetzen:

Wichtig: Beachten Sie, das wir dem Komponentennamen mit x- beginnen müssen:

<x-starter-header title="Vibrant Ecosystem" />

Laravel | Erstellen einer Starter-App

Inhaltsverzeichnis

TL;DR

Der Code für die in diesem Post erstelle Anwendung liegt hier.

Installation

Erstellen der Starter App

laravel new Laravel-Starter-App --jet --stack=livewire --api --teams --dark --pest --verification --database sqlite --git --quiet

Konfiguration der Datenbank

Die Konfiguration der Datenbank erfolgt in der bereits vorhandenen Datei .env.

Nach der Installation finden Sie dort die folgenden Einträge für eine MySQL Datenbankanbindung:

Datenbank SQLite verwenden

Bei Einrichten der Starter App wurde bereits SQLite vorselektiert:

DB_CONNECTION=sqlite

Leere Datenbankdatei erstellen

Die Starter App hat bereits eine leeren Datenbank im Ordner database mit dem Namen database.sqlite

Tabellen erstellen

Die für Laravel notwendigen Tabellen wurden ebenfalls eingerichtet:

php artisan migrate
Migration der Tabellen durchführen

Hinweis: Die vorhandenen Tabellen können Sie sie über die Kommandozeile anzeigen:

sqlite3.exe .\database\database.sqlite ".tables"
Vorhandene Tabellen in der Datenbank

Installation und Konfiguration des Frontend

Um mit dem Frontend arbeiten zu können, müssen zu ersten die notwendigen Komponenten installiert und das Frontend erstellt werden:

npm install
npm run dev

Anzeigen der Anwendung

Die grundlegende Installation und Konfiguration ist abgeschlossen. Starten Sie die Anwendung durch das nachfolgende Kommando:

php artisan serve
Lokalen Webserver starten

Öffnen Sie die Anwendung im Browser über den Link http://127.0.0.1:8000

Anmeldung und Authentifizierung

Die erstelle Laravel-Anwendung enthält bereits die Funktionalität, das sich Benutzer Registrieren und Anmelden können. Hierzu finden Sie auf der Startseite rechts oben entsprechende Links.

Mit den verwendeten Standardeinstellungen sin Ausreichend für das Einrichten neuen Benutzer.

Um eine höhere Sicherheit zu erreichen, werden diese Einstellungen so geändert, das einen Bestätigungsmail an den Benutzer gesendet wird. Erst durch den Klick auf den darin enthaltenen Bestätigungslink wird die Einrichtung des Benutzers abgeschlossen.

E-Mail Verification einrichten

Das Einrichten dieser E-Mail Verification erfolgt in mehreren Schritten.

Hinweis: Diese wurden ebenfalls durch die Starter App durchführt.

Aktivieren des Features emailVerification in der Datei config/fortify.php

Einrichtern der E-Mail-Verifizierung bei der Registrierung

Passen sie die Datei app/User.php an:

use Illuminate\Contracts\Auth\MustVerifyEmail;
class User extends Authenticatable implements MustVerifyEmail
Einrichten der emailVerification

Festlegen der E-Mail Konfiguration

Damit Laravel eine E-Mail versenden kann wird der Zugang zu einem E-Mail Server verwendet. Hier benötigen wir die Zugangsdaten für den SMTP-Versand.

Für das Empfangen der Verifizierungsmail gibt es zwei Möglichkeiten:

  • die Verifizierungsmail wird im Laravel-Log gespeichert
  • die Verifizierungsmail wird an einen SMPT-Server gesenden
    • sie können hier ihren eigenen SMTP-Server verwenden
    • oder sie verwenden mailpit (Lokaler SMTP-Server für Tests)

Festgelegt werden diese Parameter wieder in der Datei .env:

Die entsprechenden Werte hängen vom verwendeten Mailserver ab.

Laravel Log verwenden

Der Eintrag in der Datei .env lautet dann:

MAIL_MAILER=log

Die Verifizierungsmail finden sie dann in der Datei storage/logs/laravel.log:

Eigener SMTP-Server

Der Eintrag in der Datei .env lautet dann:

MAIL_MAILER=smtp

Zuerst müssen Sie bei ihrem Provider ein Mailkonto einrichten (Benutzer und Passwort). Testen Sie am besten diese Daten über den von ihrem Provider bereitgestellten Webmailer.

Die weiteren Werte (Port, Protokoll) entnehmen Sie der Dokumentation ihres Providers.

Nachfolgend zwei Beispiele:

ProviderStratoUnited Domains
MAIL_MAILERsmtpsmtp
MAIL_HOSTsmtp.strato.desmtps.udag.de
MAIL_PORT587587
MAIL_ENCRYPTIONtlstls
Beispiele für die E-Mail-Konfiguration

Lokaler SMTP-Server für Testzwecke: mailpit

Für Testzwecke können sie die E-Mail-Konfiguration auch vereinfachen, indem ein lokaler Mailserver verwendet wird: mailpit (https://mailpit.axllent.org/docs/install/)

Installieren sie diesen und starten sie ihn dann mit den Parametern aus der Laravel-Konfiguration: dem SMTP-Port aus der Datei .env. Passen sie zusätzlich den Parameter MAIL_MAILER an:

MAIL_MAILER=smtp
❯ mailpit -s 0.0.0.0:2525
INFO[2024/04/09 18:42:33] [smtpd] starting on 0.0.0.0:2525 (no encryption)
INFO[2024/04/09 18:42:33] [http] starting on [::]:8025
INFO[2024/04/09 18:42:33] [http] accessible via http://localhost:8025/

mailpit Frontend öffnen

Klicken sie auf den angegeben Link der Ausgabe von mailpit, um das Frontend zu starten:

http://localhost:8025/

Benutzer einrichten

Starten Sie die Anwendung neu und richten Sie einen weiteren Benutzer ein

php artisan serve
Lokalen Webserver starten

Registrierung durchführen

Starten Sie die Registrierung über den Link Register auf der Startseite.

Geben Sie die notwendigen Benutzerdaten ein. Bestätigen Sie ebenfalls die Terms of Services, falls diese aktiviert sind. Wie sie diese aktivieren können sie hier nachlese.

Bei erfolgreichen Versand der Bestätigungsmail erscheint diese Anzeige. Sie erhalten ebenfalls eine Bestätigungsmail an die verwendete E-Mail-Adresse.

Öffnen Sie die E-Mail und klicken Sie auf den Bestätigungslink. Achten Sie darauf, das der Link im gleichen Browser geöffnet wird, mit dem Sie die Registrierung durchgeführt haben.

Alternativ kopieren Sie einfach den Link, wechseln wieder zurück in das Registrierungsfenster und fügen den kopierten Link ein.

Wenn sie mit mailpit arbeiten, so sehen sie im Frontend, das eine neue E-Mail eingegangen ist:

Danach befinden Sie sich auf dem Dashboard der Anwendung. Die Registrierung hat somit funktioniert.

Mögliche Konfigurationsfehler

E-Mail Server ist falsch

Fehlermeldung: Der angegebene Host ist unbekannt

Port ist falsch

Fehlermeldung: Es konnte keine Verbindung hergestellt werden, da der Zielcomputer die Verbindung verweigerte

Benutzername oder Passwort sind falsch

Fehlermeldung: Authentication failed: wrong user/password

Weitere Anpassungen

Terms of Services aktivieren

Aktivieren Sie dazu das Feature termsAndPrivacyPolicy in der Datei config/jetstream.php

Dadurch sehen sie im Registrierungsdialog ein zusätzliches Optionsfeld

Ändern der Sprache

Bearbeiten Sie in der Datei config/app.php die Einstellung locale. Ändern Sie den Wert auf 'de'.

Nach einem Neustart der Anwendung werden aber weiterhin die englischen Texte angezeigt.

Die Ursache liegt an der nicht vorhandenen deutschen Übersetzung der verwendeten Texte. Prüfen Sie einfach den Ordner mit den vorhandenen Übersetzungen: resources/lang

Es gibt nur einen Unterordner en für die englischen Texte:

Zusätzlich zu den Übersetzungen muss noch ein weiterer Schritt erfolgen. Um ihre Anwendung komplett auf Mehrsprachlichkeit umzustellen dürfen keine Texte direkt angegeben werden.

Betrachten wir hierzu die Startseite, speziell die Links in der rechten oberen Ecke:

Der View für die Startseite wird in der Datei resources/views/welcome.blade.php definiert:

Wir sehen, das hier der Text direkt in englischer Sprache angegeben wird.

<a href="{{ route('register') }}" class="...">Register</a>

Es ist sehr schwierig, eine automatische Übersetzung für alle Texte durchzuführen, wenn nicht angegeben wird, ob ein bestimmter Text übersetzt werden soll. Einfach alle Texte zu übersetzen kann zu Problemen führen.

Daher wird bei Laravel der Weg gewählt, explizit anzugeben, ob ein Text übersetzt werden soll.

Diese Angabe der nachfolgende Text soll übersetzt werden erfolgt mit Hilfe der Funktion __ (Der Name der Funktion lautet tatsächlich __, als zwei Unterstriche)

Anstatt

Register

schreiben wir nun

{{ __('Register') }}

Dadurch erkennt Laravel (speziell die Blade Template Engine), das hier eine Übersetzung durchgeführt werden soll und sucht eine passenden Übersetzungstext.

Hier kommt nun der bereits angesprochen Ordner resources/lang ins Spiel. Erstellen Sie in diesem Ordner eine Datei de,json und verwenden Sie als Inhalt den nachfolgenden Text:

Nach einen Neustart der Anwendung sehen wir gewünschte Ergebnis:

Den gewünschten Übersetzungstext findet Blades anhand des angegebenen Textes innerhalb der Funktion __:

welcome.blade.phpde.json

Die Übersetzung der Anwendung erfordert somit für alle Texte die gleichen Schritte

  • Ermitteln des Views mit dem zu übersetzenden Text, z. B. Sample Text
  • Einbinden des Textes in die Funktion , z. B. {{ ('Sample text') }}
  • Hinzufügen der Übersetzung in der Datei de.json, z. B. "Sample text“: Beispieltext

Erstellen einer neue Startseite

Die Startseite entspricht immer noch der Standardanwendung. Der entsprechende View ist welcome.blade.php.

Zur Startseite wird dieser View aber nicht durch den Namen, sondern durch eine Einstellung in der Datei routes/web.php

Mit Hilfe des von Laravel verwendeten Routing, wird festgelegt, welcher View angezeigt wird, wenn eine bestimmte URI aufgerufen wird.

In der vorhandenen Einstellung legt fest, das bei der Uri '/' der View 'welcome' angezeigt wird.

Einfache Startseite erstellen

Wir verwenden hier das in der Laravel Dokumentation beschrieben einfache Beispiel.

Erstellen Sie die Datei Datei resources/views/home.blade.php. Verwenden Sie als Inhalt den nachfolgenden Text

<html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

Routing anpassen

Passen Sie dann die Datei routes/web.php an.

Route::get('/welcome', function () {
    return view('welcome');
})->name('welcome');

Route::get('/', function () {
    return view('home', ['name' => 'Laravel']);
});

Wir ändern die neue Startseite mit der Uri / und stellen die alte Startseite unter einer neuen Uri /welcome bereit.

Neue Startseite anzeigen

Öffnen Sie nun wieder die Seite http://localhost:8000 oder aktualisieren Sie ein bereits geöffnetes Browserfenster:

Die vorherige Startseite können wir über die Uri /welcome erreichen

Neue Seite zur Navigation hinzufügen

Erweitern Sie die Daten resources/views/navigation-menu.blade.php um einen Eintrag:

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-jet-nav-link href="{{ route('dashboard') }}" 
                    :active="request()->routeIs('dashboard')">
         {{ __('Dashboard') }}
    </x-jet-nav-link>
</div>

<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-jet-nav-link href="{{ route('welcome') }}" 
                    :active="request()->routeIs('welcome')">
         {{ __('Welcome') }}
    </x-jet-nav-link>
</div>

Komponenten

Komponente erstellen

php artisan make:component MyComponent

Blade-Komponenten registrieren

You can register your jetstream blade components in App\Providers\JetstreamServiceProvider.php located in app\Providers folder.

Fügen sie die nachfolgende Funktion hinzu:

protected function registerComponent(string $component) {
    \Illuminate\Support\Facades\Blade::component('jetstream::components.'.$component, 'jet-'.$component);
}

Der nachfolgende Programmcode registriert ihre Komponente:

public function register() {
    $this->registerComponent('subform');
}

Sie können diese nun wie folgt nutzen:

<x-jet-subform>

Laravel | Einstieg in </> htmx

Inhaltsverzeichnis

TL;DR

Der Code für die in diesem Post erstelle Anwendung liegt hier.

Einrichten der Starter-App

Erstellen der Starter App. In diesem Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchführen können.

Sie können auch direkt mit dem dazugehörigen Repository starten:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App Laravel_Tutorial_Arbeiten-mit-htmx
❯ composer install
❯ npm install
❯ npm run build
❯ php artisan
❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate
❯ php artisan serve

htmx einrichten

Installation

❯ npm install htmx.org

Hinweis: Verwenden sie nicht das NPM Paket htmx, dies hat einen anderen Inhalt

Seite für unsere Beipiele erstellen (htmx Playground)

Routing erstellen

Seite erstellen: resources/views/playground.blade.php

cp resources/views/dashboard.blade.php resources/views/playground.blade.php

Inhalt anpassen:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Playground') }} for Laravel and <<span style="color:#3d72d7">/</span>> htm<span
                    style="color:#3d72d7">x</span>
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
                #
            </div>
        </div>
    </div>
</x-app-layout>

Navigationslinks anpassen

Ergebnis

Ersten htmx Aufruf hinzufügen

API Aufruf einrichten

Die Datei routes/api.php erweitern:

Route::get('/htmx/message', function () {
    return response('Dies ist eine Nachricht', 200)->header('Content-Type', 'application/json');
});

Playground Seite anpassen

<div hx-get="/api/htmx/message">
    Mitteilungen laden...
</div>

Ergebnis

htmx Beispiele

Auf der htmx – Projekteseite finden sie viele Beispiele. Wir wollen nun einige davon in Laravel umsetzen.

Astro Tutorial – Working with Preact

Inhaltsverzeichnis

TL;DR

Code for this tutorial is on Github

Starter Project

Create Starter

❯ npm create astro@latest "Tutorial - Working with Preact"
.../21.6.2/pnpm/store/v3/tmp/dlx-99714   |  +39 ++++
.../21.6.2/pnpm/store/v3/tmp/dlx-99714   | Progress: resolved 39, reused 39, downloaded 0, added 39, done

 astro   Launch sequence initiated.

      ◼  dir Using Tutorial - Working with Preact as project directory

  tmpl   How would you like to start your new project?
         Empty

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

      ✔  Project initialized!
         ■ Template copied
         ■ TypeScript customized
         ■ Dependencies installed
         ■ Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd "./Tutorial - Working with Preact"
         Run pnpm dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

Run Starter

❯ cd "Tutorial - Working with Preact"
❯ npm run dev

> tutorial---working-with-preact@0.0.1 dev /Users/Shared/CLOUD/Programmier-Workshops/Kurse/Astro/Einsteiger/Tutorial - Working with Preact
> astro dev


 astro  v4.5.13 ready in 156 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

14:34:39 watching for file changes...

Modify Project Structur and add helper code

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "allowJs": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "lib": ["es2022", "dom", "dom.iterable"],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*", ".vscode", "dist"]
}

Replace relative path with reference to path alias in every page

import Layout from '../../layouts/BlogPost.astro';

becomes to

import Layout from '@/layouts/BlogPost.astro';
import Layout from '../styles/global.css';

becomes to

import Layout from '@/styles/global.css';

Install Preact Integration

Add integration for preact

❯ npx astro add preact
✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────────────────────╮
 │ pnpm add @astrojs/preact@^3.1.2 preact@^10.20.1  │
 ╰──────────────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import preact from "@astrojs/preact";         │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [preact()]                    │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes

   success  Added the following integration to your project:
  - @astrojs/preact

  Astro will make the following changes to your tsconfig.json:

 ╭ tsconfig.json ───────────────────────────────────────────────────────╮
 │ {                                                                    │
 │   "extends": "astro/tsconfigs/strict",                               │
 │   "compilerOptions": {                                               │
 │     "allowJs": true,                                                 │
 │     "strictNullChecks": true,                                        │
 │     "baseUrl": ".",                                                  │
 │     "lib": [                                                         │
 │       "es2022",                                                      │
 │       "dom",                                                         │
 │       "dom.iterable"                                                 │
 │     ],                                                               │
 │     "paths": {                                                       │
 │       "@/*": [                                                       │
 │         "src/*"                                                      │
 │       ]                                                              │
 │     },                                                               │
 │     "jsx": "react-jsx",                                              │
 │     "jsxImportSource": "preact"                                      │
 │   },                                                                 │
 │   "exclude": [                                                       │
 │     "node_modules",                                                  │
 │     "**/node_modules/*",                                             │
 │     ".vscode",                                                       │
 │     "dist"                                                           │
 │   ]                                                                  │
 │ }                                                                    │
 ╰──────────────────────────────────────────────────────────────────────╯

✔ Continue? … yes

   success  Successfully updated TypeScript settings

Install preact/signale

npm install preact/signal

Modify src/pages/index.astro

---
import Counter from "@/components/Counter";
import { signal } from "@preact/signals";

const count = signal(0);
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <style>
      html,
      body {
        font-family: system-ui;
        margin: 0;
      }
      body { padding: 2rem; }
      h1 { text-align: center; }
    </style>
  </head>
  <body>
    <main>
      <h1 style="halign:center">Working with Astro and Preact</h1>
      <Counter count={count} client:visible><h3>Hello, Preact 1!</h3></Counter>
      <Counter count={count} client:visible><h3>Hello, Preact 2!</h3></Counter>
    </main>
  </body>
</html>

Create Component Counter

Create folder src/components

mkdir src/components

Create file Counter.tsx

import type { ComponentChildren } from "preact";
import type { Signal } from "@preact/signals";
import { lazy, Suspense } from "preact/compat";

import "./Counter.css";

const Message = lazy(async () => import("./Message"));
const Fallback = () => <p>Loading...</p>;

type Props = {
  children: ComponentChildren;
  count: Signal<number>;
};

export default function Counter({ children, count }: Props) {
  const add = () => count.value++;
  const subtract = () => count.value--;

  return (
    <>
      <div class="counter">
        <button onClick={subtract}>-</button>
        <pre>{count}</pre>
        <button onClick={add}>+</button>
      </div>
      <Suspense fallback={Fallback}>
        <Message>{children}</Message>
      </Suspense>
    </>
  );
}

Create file Counter.css

.counter {
	display: grid;
	font-size: 2em;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 2em;
	place-items: center;
}

Create Message.tsx

import type { ComponentChildren } from 'preact';
import './Message.css';

export default function Message({ children }: { children: ComponentChildren }) {
	return <div class="message">{children}</div>;
}

Create Message.css

.message {
	text-align: center;
}

Run App

npm run dev

Astro Tutorial – Add Table of Content (TOC) to the Post Layout

Inhaltsverzeichnis

TL;DR

Code for this tutorial is on Github

Starter Project

Create Starter

❯ npm create astro@latest
.../21.6.2/pnpm/store/v3/tmp/dlx-5990    |  +39 ++++
.../21.6.2/pnpm/store/v3/tmp/dlx-5990    | Progress: resolved 39, reused 39, downloaded 0, added 39, done

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./Tutorial - Add TOC to PostLayout

  tmpl   How would you like to start your new project?
         Use blog template

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

      ✔  Project initialized!
         ■ Template copied
         ■ TypeScript customized
         ■ Dependencies installed
         ■ Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd "./Tutorial - Add TOC to PostLayout"
         Run pnpm dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

Run Starter

❯ cd Tutorial\ -\ Add\ TOC\ to\ PostLayout/

Tutorial - Add TOC to PostLayout on  master [+] is 📦 v0.0.1 via  v21.6.2 via 🐍 v3.12.2 (3.12)
❯ npm run dev

> tutorial---add-toc-to-postlayout@0.0.1 dev /Users/Shared/CLOUD/Programmier-Workshops/Kurse/Astro/Einsteiger/Tutorial - Add TOC to PostLayout
> astro dev


 astro  v4.5.12 ready in 300 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

12:18:45 watching for file changes...

Modify Project Structur and add helper code

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "allowJs": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "lib": ["es2022", "dom", "dom.iterable"],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*", ".vscode", "dist"]
}

Replace relative path with reference to path alias in every page

import Layout from '../../layouts/BlogPost.astro';

becomes to

import Layout from '@/layouts/BlogPost.astro';
import Layout from '../styles/global.css';

becomes to

import Layout from '@/styles/global.css';

Create separate Layouts for Project and Posts

Rename src/layouts/BlogPost.astro to src/layouts/BaseLayout.astro

Change every import of BlogPost to

import Layout from '@/layouts/BaseLayout.astro';

Astro – Cookbook

Animation

Animate Image by MouseOver / Hover

CSS

      .book {
        width: 300px;
        height: 480px;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateY(-30deg);
        transition: 1s ease;
        animation: 1s ease 0s 1 initAnimation;
      }

      .book:hover {
        transform: rotateY(0deg);
      }

page.astro

        ><div class="book">
          <Image
            src={"/cover-2.jpeg"}
            width={300}
            height={600}
            alt={book.title}
            format={"avif"}
          />
        </div>

Daily: VS Code Error NSOSStatusErrorDomain

If you got an NSOSStatusErrorDomain Error, when you start VS Code from the command line

❯ code
[0309/155203.303710:ERROR:codesign_util.cc(108)] SecCodeCheckValidity: Error Domain=NSOSStatusErrorDomain Code=-67062 "(null)" (-67062)

You should do this: codesign --force --deep --sign -

❯ which code
/Users/Shared/VSCode/Default/Visual Studio Code - Insiders.app/Contents/Resources/app/bin/code

❯ codesign --force --deep --sign - "/Users/Shared/VSCode/Default/Visual Studio Code - Insiders.app"
/Users/Shared/VSCode/ralphg/Visual Studio Code - Insiders.app: replacing existing signature

❯ code -v
1.88.0-insider
19ecb4b8337d0871f0a204853003a609d716b04e
x64