Description
Description
Background
Vite provides the build.manifest option, which helps integrate with backend frameworks by describing the relationships between built JavaScript and CSS files. Backend frameworks typically parse manifest.json and generate <script> and <link> tags accordingly, embedding them into their templating systems.
https://vite.dev/guide/backend-integration
Example manifest.json:
{
"views/foo.js": {
"file": "assets/foo-BRBmoGS9.js",
"name": "foo",
"src": "views/foo.js",
"isEntry": true,
"imports": ["_shared-B7PI925R.js"],
"css": ["assets/foo-5UjPuW-k.css"]
}
}Feature Proposal
Instead of requiring backend frameworks to process manifest.json and generate HTML tags, Vite could provide an option to generate the necessary <script> and <link> tags directly. This would simplify integration with server-side frameworks, reducing the need for custom parsers or code generators on the backend side.
According to Conway’s Law, system design tends to mirror organizational structures. By allowing the frontend team to manage asset injection, we can reduce the friction between teams and streamline development.
Motivation
Our team consists of separate backend and frontend teams, working with different programming languages. Currently, backend engineers must understand Vite's manifest format and implement a custom code generator to inject the correct assets. Ideally, Vite-related concerns should be maintained by the frontend team, as this better reflects our team's structure and expertise.
Suggested solution
I propose introducing a new option: build.generateBackendIntegrationHtml.
When enabled, Vite will generate a file named .vite/backend-integration-html.json, which provides pre-generated HTML snippets for embedding assets into backend templates. This eliminates the need for backend frameworks to parse manifest.json and construct <script> and <link> tags manually.
Example .vite/backend-integration-html.json:
{
"views/foo.js": {
"head": {
"afterBegin": "",
"beforeEnd": "<link rel=\"stylesheet\" href=\"assets/foo-5UjPuW-k.css\" />\n<link rel=\"stylesheet\" href=\"assets/shared-ChJ_j-JJ.css\" />\n<script type=\"module\" src=\"assets/foo-BRBmoGS9.js\"></script>"
},
"body": { "afterBegin": "", "beforeEnd": "" }
}
}Each entry corresponds to an entry point in the project and contains predefined HTML snippets for different locations within a template (e.g., inside <head> or <body>).
The property names (afterBegin, beforeEnd) are inspired by insertAdjacentHTML, making it intuitive for developers familiar with DOM manipulation.
This structure allows backend frameworks to simply read and insert the required tags without additional processing.
Alternative
No response
Additional context
No response
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.