Backend integration in development

[lhapaipai]

Clear and concise description of the problem

if I want to use vite with my backend integration, I don't know if vite client is running and I have to take :

<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/main.js"></script>

or if I have to use files from manifest.json :

<link rel="stylesheet" href="/assets/{{ manifest['main.js'].css }}" />
<script type="module" src="/assets/{{ manifest['main.js'].file }}"></script>

As a developer, I think it would be interesting to know if files documented by manifest.json are out of date when I'm running the vite client : http://localhost:3000/@vite/client

Suggested solution

delete the manifest.json when I'm running the vite dev client. so I know that I have to call

<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/main.js"></script>

Alternative

update the manifest.json with dev informations when I'm running the vite dev client.

[RentecTravis]

In my case I would love to use Vite to replace Webpack in our PHP app, for faster build times during development. Right now that's not an option.

Most pages have their own entrypoints. We scan manifest files generated by Webpack in both development and production mode to render out all the <script> and <link> tags for the current page.

The Alternative option stated above - generating manifest.json when running vite in development mode - would be ideal. This would enable us to use Vite.

[lhapaipai]

Hi @RentecTravis, for your information, I have meanwhile created a plugin for Vite :
lhapaipai/vite-plugin-symfony which generates from the manifest file a json with the appropriate entry points.

with this config

import symfonyPlugin from "vite-plugin-symfony";

// vite.config.js
export default defineConfig({
    plugins: [
         symfonyPlugin(),
    ],

    build: {
        rollupOptions: {
            input: {
              app: "./app.js" 
            },
        },
    }
});

you get this in dev :
entrypoints.json

{
  "isProd": false,
  "viteServer": {
    "origin": "http://localhost:3000",
    "base": "/build/"
  },
  "entryPoints": {
    "app": {
      "js": [
        "http://localhost:3000/build/app.js"
      ]
    },
  }
}

and this in prod
entrypoints.json

{
  "isProd": true,
  "entryPoints": {
    "app": {
      "js": [
        "/build/app.2cdc77ca.js"
      ],
      "css": [
        "/build/app.8241fdaf.css"
      ],
      "preload": [
        "/build/index.es.09ea6271.js"
      ]
    }
}

his name is vite-plugin-symfony but it can be used with any other framework (I named it that way because it was added to a bundle for symfony)
Hoping this can help you

[RentecTravis]

Thanks @lhapaipai, that does help. It looks like your package may get us a significant part of the way there. It's wonderful that the output is so similar to the entrypoints.json that Webpack Encore generates 😃

[RentecTravis]

Of course, it would still be wonderful to have the manifest.json too for all the other asset URLs, like fonts and images, which may be used directly in HTML and not in CSS/JS contexts.

[lhapaipai]

if you are using Symfony, you can try pentatrion/vite-bundle it works in the same way that webpack encore but with vite. you can also import image assets...

[RentecTravis]

@lhapaipai thank you. We're not using Symfony, just vanilla PHP (it's an old application) to do the same thing that encore_entry_*_tags() does

[bluwy]

I'm not sure what this feature request is proposing. The manifest is only generated in build, I'm not sure how it's related to

<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/main.js"></script>

which @vite/client is only for dev.

delete the manifest.json when I'm running the vite dev client. so I know that I have to call

Can you elaborate why the Vite dev client should delete the built manifest?

[lhapaipai]

hi @bluwy,
my issue was : if you use vite with a backend like Symfony. you use the manifest.json to generate your entrypoints. if your manifest is present, you parse the file to determine the scripts to include. if your manifest is not present, you create a connection with the dev server.
but if you run the dev server and your manifest is still present you have no easy way to know that you have to include in your script tag the connection to the dev server.

this issue is solved with https://github.com/lhapaipai/vite-plugin-symfony

[bluwy]

I think it's good to fix this through a Vite plugin for now as not all integrations rely on the manifest behaviour like Symfony to work. Closing in favour of the plugin.