Browser Sync installieren

By PierreAdmin , 20 September 2026

Kurzanleitung zur Installation von Browsersync. Gehört später in die Basisinstallation

  • Verzeichnis /tools/frontend/ im Projektroot erstellen und dorthin wechseln
    • npm init -y
  • Dies erzeugt vorab nur eine leere package.json Datei
  • Dann installieren wir Browsersync:
    • npm install --save-dev browser-sync
      • nodes_modules Ordner und package-lock.json wird erstellt
    • Zum prüfen 
    • npm list browser-sync

  • json öffnen und folgendes Testscript ersetzen. Setzt voraus, dass das custom Theme schon existiert, oder zumindest die Ordnerstruktur klar ist. Damit wird Browser Sync gestartet und die zu überwachenden Verzeichnisse definiert:

    "scripts": {
    "dev": "browser-sync start --proxy \"https://dev-modestia26.selfip.net\" --files \"../../public/web/themes/custom/modestia/css/*.css,../../public/web/themes/custom/modestia/templates/**/*.html.twig\" --reload-delay 500"
},
  • prüfen ob Browser Sync läuft
    • npm run dev
      • Danach sollte Browser Sync starten und die Site unter localhost:3000 angezeigt werden.
  • Browser sync beenden:
    • ctrl q
  • WICHTIG: 
    Später fürs Base-Setup: BrowserSync in eine eigene Konfigurationsdatei (bs-config.js) auslagern, damit Proxy und Watch-Pfade übersichtlich und unabhängig vom package.json eingerichtet und später einfach angepasst werden können.

 

 

Webentwicklung