Setting Up a Symfony/Svelte Stack with FrankenPHP

FrankenPHP with Symfony and Svelte

In this article, we’ll explore several recent technologies, especially the PHP server FrankenPHP, which, in my opinion, is one to watch closely as it might become a standard in a few months.

The goal is to easily set up a Symfony/Svelte stack (with the added bonus of using the Bulma CSS framework).

Prerequisites#

Docker

Haha, yes, you don’t need much to achieve great things!

However, we’ll be using:

FrankenPHP (a PHP server by Les Tilleuls and the excellent Kevin Dunglas!)
Vite.js (a JS server with HMR)
Svelte (JS framework)
Symfony

Quick note: Webpack and AssetMapper are options, but here we’ll simplify things with Vite.js.

Setting Up the Project#

Clone the Symfony-Docker repository to get started quickly:

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

Start the Symfony stack via Docker:

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

Add Node.js to the 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

Restart Docker:

docker compose up

Adding Vite.js and Dependencies#

Add the Vite.js bundle for Symfony:

docker compose exec php composer require pentatrion/vite-bundle

Install Node.js dependencies:

docker compose exec node yarn install

Start the Vite server:

docker compose exec node yarn dev --host

Configuring Svelte#

Add Svelte:

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

Update 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',
    }
});

Test a simple Svelte component:

assets/app.svelte:

<h1>Hello Svelte</h1>

assets/app.js:

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

Twig Template:

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

Bonus: Adding Bulma#

Add Bulma:

docker compose exec node yarn add sass bulma

Include Bulma in app.js:

import 'bulma';

And there you have it—a fully operational full-stack setup!

Find the source code on my GitHub.