FrankenPHP + SF7 + vite + 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, l’incroyable, Kevin Dunglas !)
• vite.js (le serveur JS qui va nous permettre de compiler nos JS ainsi que d’avoir le “HMR” (Hot Module Replacement, à chaque modif de JS/CSS, la page se mettra à jour automatiquement sans avoir à faire F5)
• Svelte (framework JS)
• Symfony (que je ne vous présente pas)

Petit aparté : j’ai utilisé pendant pas mal de temps Webpack et Webpack Encore, mais je trouve ça assez lourd, et “Encore” ajoute une couche d’abstraction pas forcement nécessaire.
J’ai aussi essayé AsssetMapper mais clairement j’ai dû passer à côté de quelque chose car je trouve ça extrêmement compliqué à mettre en place pour faire du Svelte, du coup je me suis tourné vers la solution que je vais vous présenter.
Et opinion personnelle, ce n’est pas au backend de faire le front.

On va d’abord cloner le repo GitHub symfony-docker (encore par Kevin) pour le personnaliser :

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

Dans ce repo, il y a pas mal de choses dont on ne va pas se servir (mercure, vulcain) mais on ne va pas s’en occuper. L’avantage de ce repo c’est qu’il est déjà opérationnel avec Symfony 7, il suffit de 2 lignes :

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

Et hop vous avez un Symfony tout beau tout propre prêt à faire feu :

Que l’on va arrêter tout de suite pour ajouter une image Node.js à notre stack :

docker compose down --remove-orphans

Et on va ajouter dans le fichier ‘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

On peut relancer nos dockers avec la commande ‘docker compose up‘ ci-dessus.

On avoir besoin de quelques bibliothèques pour mettre en place notre stack, d’abord la bibliothèque qui va faire le lien entre Symfony et Vite.js

docker compose exec php composer require pentatrion/vite-bundle

Vous pouvez jeter un oeil à vos fichiers, cette bibliothèque a ajouté vite et son plugin à votre ‘package.json‘, à ajouter une arborescence “assets” qui contiendra vos fichiers JavaScript et CSS, et à modifier le fichier “templates/base.html.twig” en y ajoutant 2 lignes pour que vos templates puisses accéder au JS et CSS :

{% block stylesheets %}
{{ vite_entry_link_tags(‘app’) }}
{% endblock %}

{% block javascripts %}
{{ vite_entry_script_tags(‘app’) }}
{% endblock %}

On va maintenant lancer les commandes Node.js pour installer les nouveautés du ‘package.json‘ :

docker compose exec node yarn install

Et on va lancer le serveur vite (–host car nous sommes dans une image Docker) :

docker compose exec node yarn dev --host

Et on peut tout de suite tester que le serveur Vite fonctionne bien :

Et pour tester dans symfony on va se créer un petit Controller :
(si vous êtes sous Linux vous allez besoin de rendre vos fichiers accessibles en écriture :
docker compose run –rm php chown -R $(id -u):$(id -g) .

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

class DefaultController extends AbstractController
{
    #[Route('/', name: 'app_default')]
    public function index(): Response
    {
        return $this->render('default/index.html.twig', [
    ]);
  }
}

Et son template :

{% extends 'base.html.twig' %}

{% block title %}Hello Svelte{% endblock %}

{% block body %}

{% endblock %}

Vous pouvez maintenant rafraîchir localhost, et là patatra ! Ca ne fonctionne pas ! On va devoir faire un peu de config et de magie, tout va se passer dans le fichier vite.config.js
Plusieurs choses à faire : passer le serveur Vite en HTTPS et lui mentionner sur quel IP il se trouve, pour ça, il suffit d’ajouter dans le fichier de configuration :

    server: {
      https: true,
      host: '0.0.0.0',
    }

et au niveau du plugin Symfony :

symfonyPlugin({
   viteDevServerHostname: 'localhost'
}),

Mais ça ne suffit toujours pas car pour le HTTPS il faut pouvoir générer un certificat. Heureusement, il y a un plugin pour ça :

docker compose exec node yarn add vite-plugin-mkcert

Et on va ajouter ce plugin dans la partie plugins, ce qui va nous donner ce fichier :

import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
import mkcert from "vite-plugin-mkcert";

export default defineConfig({
    plugins: [
        symfonyPlugin({
            viteDevServerHostname: 'localhost'
          }
        ),
        mkcert()
    ],
    build: {
        rollupOptions: {
            input: {
                app: "./assets/app.js",
            },
        }
    },
    server: {
      https: true,
      host: '0.0.0.0',
    }
});

Et redémarrer le serveur Vite (on n’a plus besoin de spécifier le host car nous l’avons mis dans le fichier) :

docker compose exec node yarn dev

On va se rendre sur https://localhost:5173/build/, déjà pour voir que ça fonctionne et aussi pour accepter le certificat.

Ensuite on ira sur notre https://localhost et dans la console on devrait pouvoir y voir “Happy coding !!”

On peut faire un petit test en modifiant le fichier assets/app.css et changer la couleur, qui devrait se mettre à jour automatiquement dans votre navigateur !

Déjà à partir de là on est pas mal ! On a PHP, Symfony et notre serveur JS, mais on a toujours pas Svelte !

C’est clairement pas le plus compliqué, il suffit d’ajouter Svelte à notre package.json :

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

Et modifier le fichier 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()
    ],

Et il n’y a plus qu’à relancer le serveur Vite.

Et pour tester on va faire quelques modifications : comm créer un fichier assets/app.svelte contenant seulement “Coucou Svelte”, et modifier le fichiers assets/app.js, et y ajouter :

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

Et enfin, modifier votre template twig pour y mettre :

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

Et si ce n’est pas encore fait, relancer le serveur Vite :

docker compose exec node yarn dev

Et voilà ! Vous avez maintenant une belle stack fullstack !

BONUS ! On va maintenant ajouter le framework Bulma à cette stack, un framework que j’apprécie particulièrement pour sa simplicité et sa légèreté !
On va l’ajouter à notre package.json (ainsi que la bibliothèque SASS indispensable) :

docker compose exec node yarn add sass bulma

Et tout simplement le mettre dans votre fichier app.js par exemple :

import 'bulma'

and voilà !

Vous pouvez retrouver l’ensemble des sources sur mon github :