SINGLE PAGE APPLICATION - PREACT

Création

(depuis la racine du projet)

Création des répertoires de la SPA

mkdir -p spa/src spa/public spa/assets/css

Copie du répertoire contenant le style de l'application symfony : spa/src vers le répertoire des styles pour la SPA

cp assets/css/*.scss spa/assets/css/

Se positionner à la racine du projet SPA

cd spa

Initialiser le package.json

yarn init - y

Quelques dépendances

Pour les styles

yarn add @symfony/webpack-encore @babel/core @babel/preset-env babel-presetpreact preact html-webpack-plugin bootstrap

Router

yarn add preact-router

Loader Sass

yarn add node-sass "sass-loader@^9.0"

Penser à l'activer dans webpack.config.js

Encore
    …
    .enableSassLoader() 
    …
;

Créer un .gitignore

/node_modules, 
/public/, 
yarn-error.log, 
/app

Ainsi que webpack.config.js

const Encore = require('@symfony/webpack-encore');
const HtmlWebpackPlugin = require('html-webpack-plugin');

Encore
    .setOutputPath('public/')
    .setPublicPath('/')
    .cleanupOutputBeforeBuild()
    .addEntry('app', './src/app.js')
    .enablePreactPreset()
    .enableSingleRuntimeChunk()
    .addPlugin(new HtmlWebpackPlugin({ template: 'src/index.ejs', alwaysWriteToDisk: true }))
;
module.exports = Encore.getWebpackConfig();

Exécuter la SPA dans le navigateur

PENSER A EXPOSER LA VARIABLE D'ENVIRONNEMENT

API_ENDPOINT=`symfony var:export SYMFONY_PROJECT_DEFAULT_ROUTE_URL --dir=..` yarn encore dev

Et en tache de fond

API_ENDPOINT=`symfony var:export SYMFONY_DEFAULT_ROUTE_URL --dir=..` symfony run -d --watch=webpack.config.js yarn encore dev --watch

Lancer le Serveur

symfony server:start -d --passthru=index.html

--passthru= = indique au serveur web de transmettre toutes les requêtes HTTP au fichier public/index.html (public/ est le répertoire par défaut du serveur web)

COMPILER LES ASSETS (fichiers .css et .js)

A chaque modification du code

yarn encore dev