PHP in Vite nutzen: So integrierst du Backend-Logik in dein Frontend-Tooling

Vite hat die Frontend-Entwicklung revolutioniert. Es ist extrem schnell, bietet Hot Module Replacement (HMR) out-of-the-box und eine großartige Developer Experience. Doch viele Projekte, gerade im Bereich WordPress oder klassischer Webentwicklung, setzen nach wie vor auf PHP.

In diesem Artikel schauen wir uns an, wie wir PHP nahtlos in den Vite-Entwicklungsprozess integrieren können, indem wir einen eigenen Vite-Plugin schreiben und den internen Proxy nutzen.

Die Herausforderung

Vite ist ein statischer File-Server für moderne JavaScript-Projekte. PHP hingegen muss serverseitig interpretiert werden. Wenn wir .php Dateien in unserem Projekt haben, weiß Vite standardmäßig nicht, wie es damit umgehen soll.

Die Lösung: Ein PHP-Server-Plugin

Wir können Vite erweitern, indem wir während des Entwicklungsstarts automatisch einen lokalen PHP-Server mit php -S starten. Hier ist die Konfiguration, die wir in diesem Projekt verwenden:

1. Das PHP-Server Plugin

In der vite.config.js definieren wir eine Funktion, die den PHP-Server startet:

const phpServerPlugin = () => ({
    name: 'php-server',
    configureServer(server) {
        const publicDir = resolve(__dirname, 'public');

        const php = spawn('php', ['-S', '127.0.0.1:8002', '-t', publicDir], {
            stdio: 'inherit',
            shell: true
        });

        server.httpServer.on('close', () => {
            php.kill();
        });
    }
});

Dieses Plugin nutzt spawn aus dem node:child_process Modul, um einen PHP-Server auf Port 8002 zu starten. Das Root-Verzeichnis (-t) ist unser public-Ordner. Sobald der Vite-Server geschlossen wird, beenden wir auch den PHP-Prozess.

2. Die Proxy-Konfiguration

Damit Vite weiß, dass Anfragen an PHP-Dateien an unseren neuen Server weitergeleitet werden sollen, nutzen wir die server.proxy Option:

export default defineConfig({
    plugins: [
        // ... andere plugins
        phpServerPlugin()
    ],
    server: {
        proxy: {
            '^/.*\\.php$': 'http://127.0.0.1:8002'
        }
    }
});

Mit diesem RegEx werden alle Anfragen, die auf .php enden, transparent an http://127.0.0.1:8002 durchgereicht.

Warum dieser Ansatz?

Dieser Workflow bietet mehrere Vorteile:

1. Ein Befehl: Mit npm run dev startest du sowohl Vite als auch PHP.
2. Kein CORS-Stress: Da alles über den Vite-Port läuft, gibt es keine Cross-Origin Probleme.
3. Flexibilität: Du kannst PHP für dynamische Assets, Proxy-Skripte oder kleine Backend-Funktionen nutzen, während du die volle Power von Vite für dein CSS und JS behältst.

Fazit

Die Integration von PHP in Vite ist einfacher als man denkt. Durch die Kombination eines kleinen Plugins mit der Proxy-Funktionalität von Vite erhältst du eine moderne Entwicklungsumgebung, ohne auf bewährte Backend-Technologien verzichten zu müssen.