Mise en place d'une stack Symfony/Svelte avec FrankenPHP

FrankenPHP avec Symfony et Svelte

Dans cet article, nous allons nous amuser avec plusieurs technologies récentes, en particulier le serveur PHP FrankenPHP qui, à mon avis, est à suivre de très près car il pourrait devenir une référence dans quelques mois.

L’objectif est de mettre en place facilement une stack Symfony/Svelte (avec en bonus l’utilisation du framework CSS Bulma).

Prérequis#

Docker

Ahah oui, il ne faut pas grand-chose pour faire de grandes choses !

Cependant, nous allons utiliser :

FrankenPHP (le serveur PHP made in Les Tilleuls et l’excellent Kevin Dunglas !)
Vite.js (serveur JS avec HMR)
Svelte (framework JS)
Symfony

Petit aparté : Webpack et AssetMapper sont des options, mais ici, nous allons simplifier avec Vite.js.

Mise en place du projet#

Clonons le repo Symfony-Docker pour démarrer rapidement :

git clone https://github.com/dunglas/symfony-docker sf7svelte

Lançons la stack Symfony via Docker :

docker compose build --no-cache
docker compose up --pull always -d --wait

Ajoutons Node.js à la stack :

# compose.override.yaml
node:
  image: node:lts-alpine
  tty: true
  working_dir: /app
  depends_on:
    - php
  volumes:
    - ./:/app
  environment:
    NODE_ENV: development
  ports:
    - target: 5173
      published: 5173
      protocol: tcp

Relançons Docker :

docker compose up

Ajout de Vite.js et des dépendances#

Ajoutons le bundle Vite.js pour Symfony :

docker compose exec php composer require pentatrion/vite-bundle

Installons les dépendances Node.js :

docker compose exec node yarn install

Lançons le serveur Vite :

docker compose exec node yarn dev --host

Configuration de Svelte#

Ajoutons Svelte :

docker compose exec node yarn add @sveltejs/vite-plugin-svelte svelte

Mise à jour de vite.config.js :

import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
import mkcert from "vite-plugin-mkcert";
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
    plugins: [
        symfonyPlugin({
            viteDevServerHostname: 'localhost'
        }),
        mkcert(),
        svelte()
    ],
    server: {
      https: true,
      host: '0.0.0.0',
    }
});

Testons un composant Svelte simple :

assets/app.svelte :

<h1>Coucou Svelte</h1>

assets/app.js :

import App from "./app.svelte";
const app = new App({
  target: document.getElementById("app"),
});

Template Twig :

{% block body %}
    <div id="app"></div>
{% endblock %}

Bonus : Ajout de Bulma#

Ajoutons Bulma :

docker compose exec node yarn add sass bulma

Ajoutons Bulma dans app.js :

import 'bulma';

Et voilà, une belle stack fullstack opérationnelle !

Retrouvez les sources sur mon GitHub.