Vite HMR and symfony serve

[WebMechanic]

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!

[Hugues Tavernier]

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

[WebMechanic]

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!

[Hugues Tavernier]

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)