Vite HMR and symfony serve
WebMechanic opened this issue · comments
Salût,
we currently use Symfony Encore in several projects, one is planned for relaunch using Vue3 and I was hoping to move away from Encore and WebPack and use Vite with this fine bundle.
To get more familiar with this, I have created a blank local symfony test project using the symfony binary. All things like Twig, loading the "app" js and css etc. works fine, but I can't get HMR to work.
symfony server:start --no-tls
or symfony serve --no-tls
run on http://127.0.0.1:8000/
where I can see the output of my routes and twig templates.
I need to run build --watch
instead of dev
, then manually refresh the browser to see the change.
Using build
seems ok with a couple of scripts, but there will be loads more js and css files in the actual web project. I have no experience yet whether build
watch mode will give us the same DX like dev
watch mode, let alone build
doesn't give me HMR, which is one major selling point for using Vite in the first place.
When I run yarn dev --watch
, Vite tells me to visit Local: http://127.0.0.1:5173/build/
where all I find is the Symfony + Vite default page
This is not the place to view your application. To access your Symfony application, you will need to run a local development server. symfony serve
What's this /build
route for?
How does symfony serve
with yarn dev
(vite) give me hot module reloads?
I understand port 5173
is Vite's new default port, but how do I "link" this with Symfony's local web server ...
... or eventually nginx which is used for developing the final website and running on a different machine. Would this then require port forwarding?
I'm a bit lost here and any help and hints are appreciated. 🙏
Thank you!
Hi @WebMechanic ,
if you run symfony serve --no-tls
you launch symfony local server listening on port : 8000.
if you run yarn dev
, you launch vite dev server with hmr listening on port: 5173.
if you want to develop locally you must therefore run these 2 commands.
if you want to consult a page you have to use the local server of symfony : http://localhost:8000
.
calls to the vite dev server are made through twig function : {{ vite_entry_script_tags('app') }}
who return
<script src="http://localhost:5173/build/@vite/client" type="module"></script>
<script src="http://localhost:5173/build/app.js" type="module"></script>
so do not go directly to http://localhost:5173
the message written by the vite dev server when you run yarn dev
can be disturbing, but we can't change it...
indeed, using the watch mode will not give you the hmr
hoping to have brought you some answers
Mercie bien, @lhapaipai !
I see 💡 : so I run both tasks (a webserver, vite dev) but that special /build
URL is only provided to be consumed (internally) by the Vite plugin.
Excellent!
Merci beaucoup pour ce bundle et ton aide !
Just to understand what's happing, no complaint! :D ...
I can't see Vite's webworker included as well, and it reloads the whole page if I change a file, not single "modules" as HMR would do.
Is this a technical "limitation" caused by Symfony's need to re-compile the Twig templates?
Despite it's a useful feature, can I disable the refresh
setting so it does not relaod the page while I'm editing Twig files? This can be a bit too many roud trips :-)
And finally just in case: what if I have the need for a /build
route myself? Where would I need to change Vite's config to use a different URL? if at all possible.
...but we can't change it...
I don't recall seing that URL explained in either readme so it was a bit surprising, and I was wondering about the _pentatrion_vite
route when I installed this.
Maybe dev-server-404.html
can contain a note about the meaning of this route, or the Vite plugin can write a simple console message?
Thanky you!
hi !
Mais de rien :-)
Actually here is what I was able to find.
With vanilla js, if you change a js file, the page is reloaded entirely, if you change a style file, there is hmr. With Vue/React/etc the behavior can change with the js. if you were able to inspect the behavior more deeply with your favorite framework, your feedback is welcome !
if you want to deactivate the twig refresh you can set it to false in your vite.config.js
import symfonyPlugin from 'vite-plugin-symfony';
export default defineConfig({
plugins: [symfonyPlugin({
refresh: false
})],
// ...
});
you can change the build
directory to another, you can take a look at the vite-plugin-symfony doc : https://github.com/lhapaipai/vite-plugin-symfony
you will then have to update/create your configuration file config/packages/pentatrion_vite.yaml
pentatrion_vite:
# Base public path when served in development or production
base: /build/
# path to the web root relative to the Symfony project root directory
public_dir: /public
the bundle needs it to determine where the important public/build/entrypoints.json
file is located. (file used by twig functions)