Bash-Skript zum Starten einer Frontend-Entwicklungsumgebung

August 10, 2020

Moderne Frontend-Entwicklung erfordert oft den parallelen Einsatz mehrerer Werkzeuge: ein Code-Editor, ein Entwicklungsserver, ein Emulator oder Browser, Debugging-Tools und Log-Ausgaben. Das manuelle Starten all dieser Anwendungen kann mühsam sein.

Ein einfaches Bash-Skript kann diesen Prozess automatisieren und Ihre gesamte Entwicklungsumgebung mit einem einzigen Befehl initialisieren.

1. Zielsetzung

Das Ziel des Skripts ist es, die folgenden Aktionen automatisiert auszuführen:

In das korrekte Projektverzeichnis wechseln.
Den Code-Editor (z.B. VS Code) öffnen.
Den Entwicklungsserver starten (z.B. npm start).
Einen Emulator oder Simulator starten.
Zugehörige Debugging-Tools und Log-Streams öffnen.

2. Beispiel-Skript für eine React Native-Umgebung

Dieses Beispielskript ist auf eine typische React Native-Entwicklungsumgebung unter Linux oder macOS zugeschnitten.

code

#!/usr/bin/env bash
set -e # Beendet das Skript bei Fehlern

# --- Konfiguration ---
PROJECT_DIR="$HOME/dev/my-react-native-app"
EMULATOR_NAME="Pixel_5_API_33"

echo "Starte Entwicklungsumgebung für: $PROJECT_DIR"

# --- In das Projektverzeichnis wechseln ---
cd "$PROJECT_DIR"

# --- Anwendungen im Hintergrund starten ---

echo "Starte VS Code..."
# '&' führt den Befehl im Hintergrund aus
code . &

echo "Starte Metro Bundler (npm start)..."
# Startet den Entwicklungsserver in einem neuen Terminal-Fenster (hier für GNOME Terminal)
gnome-terminal -- "npm" "start"

echo "Starte Android-Emulator..."
emulator -avd "$EMULATOR_NAME" &

echo "Starte React Native Debugger..."
react-native-debugger &

echo "Starte Android Logcat..."
# Startet Logcat in einem weiteren Terminal
gnome-terminal -- "adb" "logcat" "*:S" "ReactNative:V" "ReactNativeJS:V"

echo "--- Umgebung ist bereit ---"

Anpassung: Ersetzen Sie gnome-terminal durch den Befehl für Ihr Terminal (z.B. open -a Terminal . auf macOS, gefolgt von Befehlen, die im neuen Fenster ausgeführt werden).

3. Prozesse im Hintergrund ausführen

Damit das Hauptskript nicht blockiert wird, müssen langlebige Prozesse im Hintergrund gestartet werden.

& (Ampersand): Der einfachste Weg, einen Prozess im Hintergrund zu starten. Das Skript wird sofort fortgesetzt.
& disown: Trennt den Hintergrundprozess vollständig von der aktuellen Shell. Das Schließen des Terminals beendet den Prozess nicht.
code
```
mein-server & disown
```
nohup ... &: Macht einen Prozess immun gegenüber dem "Hang-up"-Signal (SIGHUP), das gesendet wird, wenn das Terminal geschlossen wird. Die Ausgabe wird standardmäßig in nohup.out umgeleitet.
code
```
# Leitet stdout und stderr nach /dev/null um, um keine Log-Datei zu erzeugen
nohup mein-server >/dev/null 2>&1 &
```

4. Alternative: `tmux` für eine organisierte Umgebung

Anstatt alle Prozesse als ungebundene Hintergrund-Jobs zu starten, bietet tmux (ein Terminal-Multiplexer) eine strukturiertere Lösung. Sie können ein Skript erstellen, das eine tmux-Sitzung mit mehreren Fenstern (Panes) startet, von denen jedes einen spezifischen Prozess ausführt.

Beispiel-Skript mit tmux:

code

#!/usr/bin/env bash
SESSION_NAME="my-app"

tmux new-session -d -s "$SESSION_NAME"

# Pane 0: Editor (Vim)
tmux send-keys -t "$SESSION_NAME:0" "vim" C-m

# Pane 1: Dev-Server
tmux split-window -v
tmux send-keys -t "$SESSION_NAME:1" "npm start" C-m

# Pane 2: Logs
tmux split-window -h
tmux send-keys -t "$SESSION_NAME:2" "adb logcat" C-m

# Fokus auf das Haupt-Pane setzen und zur Sitzung wechseln
tmux select-pane -t "$SESSION_NAME:0"
tmux attach-session -t "$SESSION_NAME"

Dieses Skript erstellt eine tmux-Sitzung mit drei Fenstern für Editor, Server und Logs und wechselt direkt in diese Sitzung.

Fazit

Ein Start-Skript für Ihre Entwicklungsumgebung ist eine einfache, aber äußerst effektive Methode, um die Produktivität zu steigern und einen konsistenten Workflow sicherzustellen. Während einfache Hintergrundprozesse für den Anfang ausreichen, bietet eine tmux-basierte Lösung eine überlegene Kontrolle und Übersicht über alle laufenden Prozesse.