Svelte & Inertia.js Demo (WEBPACK ENCORE VERSION)
What is it
Demo for Svelte and Inertia.js. Folders react and svelte both contain the same app (a simple form with errors) to showcase the differences between React and Svelte. Both apps are using Vite.
The symfony-inertia-svelte folder contains the main app for this demo. It is built like a simple Symfony app, except you don't actually use .twig files, but .svelte, making it a SPA just like a classic Svelte app. This is done thanks to Inertia.js. The app uses Webpack Encore (with Hot Reload enabled!).
How to use
- Run
make startfor a first startup, otherwisemake up. That's it. See the commands section below for more.
Ports
App should run on localhost.
| Port | Usage | Note |
|---|---|---|
| :3000 | React Vite App | |
| :4000 | Svelte Vite App | |
| :443 | Symfony App | Uses https |
| :80 | Redirects to :443 | |
| :5000 | Webpack Encore dev server | Used for hot reloading (uses https and 172.20.0.4 as static IP address) |
| :8080 | PHPMyAdmin | |
| :1080 | Mailcatcher |
Commands (Makefile)
| Command | Usage | Note |
|---|---|---|
| start | Builds and starts containers, then installs dependencies and creates db | Should only be used for fresh starts (will delete db) |
| up | Builds and starts containers | |
| stop | Stops and kills running containers | |
| rm | Removes stopped containers | |
| vendor | Installs vendor dependencies for the Symfony app | |
| ssh | Use to sh into the Symfony App container | Container app |
| shh-react | Use to sh into the React App container | Container react |
| shh-svelte | Use to sh into the Svelte App container | Container svelte |
| db | Deletes (if it exist) the current db, then recreates it (with fixtures) | |
| perm | Gives rights to Symfony App files | Useful after a make:entity for example |
| cc | Clears Symfony App cache and then warmup | |
| translations | Parses the .yaml translations to .json inside the translations/parsed folder |
See below for more info |
| sync-react-node-modules | Copies the node_modules folder from the React App to host |
|
| sync-svelte-node-modules | Copies the node_modules folder from the Svelte App to host |
|
| sync-node-modules | Copies the node_modules folder from the Symfony App to host |
|
| sync-all | Copies all node_modules folders to host |
The sync commands are here because node_modules are not shared with the host (to avoid startup problems), but you might still want them for your IDE to use.
Translations
Translating is done using Svelte i18n.
Since .yaml files are way more developer-friendly than .json, I created a parser (parser.js) which parses the .yaml files in the translations folder into .json files in the translations/parsed folder which Svelte i18n then uses.
Usage : yarn translations [FILES_TO_TRANSLATE|optional].
Example : yarn translations en fr --> will translate only en.yaml and fr.yaml, if they exist.
If no argument is specified, all .yaml files with a valid name will be translated.
Translations on the server-side are just like regular translations with Symfony (mostly for form validations). Note that the current locale is automatically sent via headers with every request, so you don't have to worry about it.
About Vite
I used Vite to get a quick up-and-running app for React/Svelte with Typescript. It is however, in my opinion, not as good for a Symfony app. I made a Vite version for the Symfony app but it is still somewhat experimental (it requires experimental settings to work) and takes longer than Webpack to run. Hot reload is faster than Webpack though, and it does generate slightly smaller bundles for prod. Webpack Encore may still be the best option for Symfony apps as of right now (especially with newer bundles like Inertia.js or Svelte). At the end of the day, they both work!
About the Demo itself
This demo is used for showcasing Svelte and see how it performs compared to React and other JS Frameworks. It is also used to demonstrate what Inertia.js is and how it can be used to greatly enhance Symfony apps.
Links
| Link | About |
|---|---|
| Google Slides | Google Slides used during the presentation |
| Inertia.js/Svelte App Online Demo | Online demo of the Inertia.js + Symfony + Svelte app (bundled with the Vite version) |
| React App Online Demo | Online demo of the React form app |
| Svelte App Online Demo | Online demo of the Svelte form app |
| Svelte Documentary | A very good documentary about Svelte and its origins |
| Svelte Tutorial | Official Svelte tutorial, covering every basic you need to know about Svelte |
| SvelteKit | The SvelteKit website |
| Svelte Loader | Webpack loader for Svelte |
| Made With Svelte | Site referencing sites, packages, etc... Made with Svelte |
| Skeleton UI | Svelte UI component library |
| Lofi and Games | Website to play relaxing games, made with Svelte |
| Svelkedex | Website to browse the Pokedex, made with Svelte |
| Photon | 3D games made with Svelte and Threlte ~ Svelte-cubed |
| Paimon.moe | Genshin Impact companion, made with Svelte |
| Svelte Society | Website containing many Svelte resources |
| Svelte Material UI | Material UI for Svelte |
| Inertia.js | The Inertia.js website |
| Inertia.js Symfony bundle | Symfony bundle for Inertia.js |
| Stack Overflow Survey | Stack Overflow survey about the most loved web-framework |
| State of JS - Front-End Frameworks | Stats & graphs about front-end frameworks in 2021 |
| JS Framework Benchmark | Benchmarks of JS frameworks (React, Vue, Svelte & Angular) |
