Webentwicklung auf macOS – Mein Setup (2025)

~11 Min. Lesezeit · Veröffentlicht am 6. August 2025

Warum dieses Setup?

Ich brauche eine Umgebung, die schnell ist, sich skripten lässt und produktionsnahes Verhalten abbildet. Apache liefert mir realistische Header/Rewrite-Tests (CSP, CORS, Caching), Node.js übernimmt Build-Tasks (Minify, Bundling, SFTP-Deploy), und VS Code ist mein flexibler Editor mit starken Erweiterungen. Homebrew hält alles aktuell. Mit diesem Setup lässt sich außerdem sehr gut auf mehreren Macs arbeiten, während Time Machine zuverlässig die Datensicherung übernimmt.

Meine Ordner-Struktur

• iCloud → Projektordner: Enthält alle wichtigen Dateien, Dokumente und Kundendaten. Hier liegt auch ein Alias zum jeweiligen Arbeitsordner.
• Mac-Festplatte → Userverzeichnis: Für jedes aktuelle Projekt existiert ein Arbeitsordner, der von GitHub genutzt wird. Vorteil: GitHub enthält nicht alle Daten (Datenschutz, Größe etc.), und es kommt zu keinen Konflikten mit iCloud.
• iCloud → Root des Webservers: Alle Projekte sind von jedem Rechner aus direkt erreichbar.

Zusätzlich halte ich mit Node.js die lokalen dist/-Ordner und den Server automatisch synchron, sodass Deployments reibungslos funktionieren.

Homebrew-Basis

Installation (Apple Silicon: Brew liegt normalerweise in /opt/homebrew):

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
brew update && brew upgrade
brew install git wget curl openssl zsh fzf ripgrep jq tree httpie

Tools kurz erklärt: fzf für schnelle Suche/History, ripgrep (rg) für ultraschnelle Code-Suche, jq fürs JSON-Parsen, httpie für API-Tests.

Apache lokal & VirtualHosts

Apache als Dienst via Homebrew installieren:

brew install httpd
brew services start httpd   # startet httpd als LaunchDaemon
# Konfigdatei: /opt/homebrew/etc/httpd/httpd.conf

In der httpd.conf aktiviere ich u. a. mod_headers, mod_rewrite und binde die VHost-Datei ein:

LoadModule headers_module modules/mod_headers.so
LoadModule rewrite_module modules/mod_rewrite.so
Include /opt/homebrew/etc/httpd/extra/httpd-vhosts.conf

Beispiel-VHost auf Port 8080:

<VirtualHost *:8080>
  ServerName dev.local
  DocumentRoot "/Users/sven/Library/Mobile Documents/com~apple~CloudDocs/Work/Sites/devsite"
  <Directory "/Users/sven/Library/Mobile Documents/com~apple~CloudDocs/Work/Sites/devsite">
    AllowOverride All
    Require all granted
  </Directory>
  ErrorLog  "/opt/homebrew/var/log/httpd/dev-error.log"
  CustomLog "/opt/homebrew/var/log/httpd/dev-access.log" common
</VirtualHost>

Hosts-Eintrag setzen:

sudo sh -c 'echo "127.0.0.1 dev.local" >> /etc/hosts'

HTTPS lokal? Mit mkcert Self-Signed Certs erzeugen und in den VHost einbinden (brew install mkcert nss).

Node.js mit nvm

nvm erlaubt mir projektweise Node-Versionen zu pinnen:

brew install nvm
mkdir -p ~/.nvm
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"' >> ~/.zshrc
nvm install --lts
nvm use --lts
node -v && npm -v

Projekt-Basics (ESLint/Prettier/TS):

npm init -y
npm install --save-dev eslint prettier typescript
npx tsc --init
npx eslint --init   # je nach Präferenz

VS Code: Extensions & Settings

Meine Essentials: ESLint, Prettier, Error Lens, GitLens, Path Intellisense, REST Client. In den Settings aktiviere ich „Format on Save“ und setze Prettier als Default-Formatter für JS/TS.

Tasks & npm-Skripte: Ich mappe Builds/Server/Deploy auf einen Befehl:

// package.json (Ausschnitt)
"scripts": {
  "dev": "vite",
  "build": "node scripts/build.mjs",
  "deploy": "node scripts/deploy.mjs"
}

Produktivität & Qualität

• One-Command Build: Minify, Hashing, Zips, optional SFTP-Upload.
• Lint/Format: ESLint/Prettier strikt, CI-check vor Deploy.
• Git: main stabil, Feature-Branches; GitHub Desktop für visuelle Diffs.
• Konfig reproduzierbar: .nvmrc, .editorconfig, .npmrc.

GitHub & Versionskontrolle

GitHub ist die Basis für mein Versionsmanagement und die Zusammenarbeit an Projekten. Alle Änderungen werden versioniert, Branches erlauben parallele Entwicklung und Pull Requests stellen Code-Reviews sicher. Über GitHub Actions kann ich Builds oder Tests automatisieren, und durch die Kombination mit iCloud habe ich jederzeit Zugriff auf meine lokalen Projekte und deren Repositories.

Typische Stolperfallen (Apple Silicon)

• Pfadknoten: Brew in /opt/homebrew; PATH in ~/.zprofile setzen.
• Native Addons: Ältere Node-Pakete ggf. mit neuem LTS oder Rosetta testen.
• Ports/Rechte: Apache auf 8080 statt 80, sudo nur wo nötig.
• File-Watcher Limits: Bei großen Projekten Watcher-Limits erhöhen (macOS FSEvents/VS Code Settings).

FAQ

Warum Apache und nicht nur Vite/Next-Dev-Server?
Ich teste Header (CSP, CORS), Rewrite-Regeln, Caching und realitätsnahe Pfade. Für Frontend-Entwicklung nutze ich zusätzlich Vite/Next im Dev-Modus.

Wie bekomme ich lokale HTTPS-Domains?
Mit mkcert Zertifikate erstellen und in den VHost einbinden. Das vermeidet Mixed-Content-Probleme.