• Webbundler mit live Preview auf Basis einer Live Website

    Ich fürchte ich muss meine geliebte CodeKitt (UI) App als Bundler verlassen und auf Vite und Webpack umsteigen
    Ein Kern Feature ist dass ich auf Basis einer Live oder online staging Website eine live preview von CSS (und etwas eingeschränkt JS) in Echtzeit bekomme.
    CodeKit watched mein SASS, kompliiert beim speichern und injected das in eine local Copy einer URL. Genial ich kann auf Basis der Daten des Kurden ändern ohne erst eine Kopie zu erstellen und die aktuell halten zu müssen.

    Wie bekomme ich das auf einer Vite (oder Webpack/Rollup) Basis hin?

    So macht es CodeKit :
    https://youtu.be/XsAesP2uvPw
    https://codekitapp.com/

    • Webbundler mit live Preview auf Basis einer Live Website

      Ich verstehe dein Problem nicht richtig, ahne aber wo du Schwierigkeiten hast.

      Was ist das für CSS vom Kunden und warum ist das anders als dein lokales?

      So mache ich das, vielleicht gibt dir das ein paar Anregungen:

      1. Ich nutze PhpStorm, das Live-Preview kann und für einfache Webseiten nutze ich in PhpStorm integrierte Watcher.

      2. Ich nutze kein MAMP o.ä. sondern einen lokalen Apache mit eigenen lokalen Domains, die auf .test enden. (Ist mit dnsmasq realisiert). Durch die lokale Domain kann ich die Enviroment-Variable ableiten und unterschiedliches Verhalten z. B. bei der Ausgabe von PHP-Fehlern ableiten oder unterschiedliche Kompression von Files.

      3. Für Vue-Projekte nutze ich Vite, das wesentlich schneller und leichtgewichtiger ist als die anderen Packer.

      4. Für größere PHP-Projekte nutze ich Composer.

      • Also m/i

        Das CSS ist auf dem Live Server oder eben wenn noch nicht Live, aber der Kunde darf schon ran der letzte Stand.
        Jetzt kommen die Anpassungen die eher im Context mit den aktuellen Inhalten zu sehen sind.

        Hätte ich eine lokale installation egal ob eine lokaler Apache, MAMP o.ä. ist dieser Stand nicht vorhanden und man muss anfachen erst mal Inhalte nachzubauen oder ein WP von online nach lokal klonen.
        Das macht einen riesigen Aufwand für vielleicht 15 Minuten Style Anpassung.

        Codekit lädt dafür eben einfach die Seite (also HTML und JS) in seinen lokalen Server und setzt das neu / live generierte CSS ein. Damit kann ich ohne es online zu stellen direkt sehen, ob es nun im Context der öffentlichen Seite funktioniert.

        Das spart wie gesagt extrem viel Zeit, Nerven und Aufwand.
        Daher suche ich dafür einen Ersatz.