SPA - TeSdY14/symfo5-dockerAndEasyAdmin-tests GitHub Wiki
PREACT
SINGLE PAGE APPLICATION - Création
(depuis la racine du projet)
répertoires de la SPA
Création desmkdir -p spa/src spa/public spa/assets/css
spa/src
vers le répertoire des styles pour la SPA
Copie du répertoire contenant le style de l'application symfony : cp assets/css/*.scss spa/assets/css/
la racine du projet SPA
Se positionner àcd spa
package.json
Initialiser le 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()
…
;
.gitignore
Créer un /node_modules,
/public/,
yarn-error.log,
/app
webpack.config.js
Ainsi queconst 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