Generate HTML Snippets for Backend Integration #19578
Comments
|
In my current team, we found the need for this functionality. Initially, I considered implementing it as a Vite plugin, but after exploring the Plugin API, I realized that the available information was insufficient for generating the necessary HTML snippets. As a workaround, we developed and are currently using a CLI tool that loads If there are no objections to adding this feature, I would be happy to contribute it myself. |
I guess this can be a plugin by doing this exact transform in I think the things needs to consider are:
By the way, do you have any assets only used from the backend? I guess the current structure of this manifest ( <img src="./path/to/image.png" /> |
In my project, there are certain script tags that are only used by the backend. However, these tags are managed by the server team and are not intended to be processed or transformed by Vite. For example, we use a server-side templating engine like the following: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example of Server Side Template</title>
<script>
// Embed a resource for i18n by the server side.
window.i18n = {};
</script>
<!-- The following script tags are managed by the Server team. -->
<script src="https://example.com/tracking-sdk.js"></script>
<!-- The following script tags are generated from manifest.json. -->
<script type="module" src="/path/to/index-abcd.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html> |
Some projects specify both In that case, it might be necessary to allow multiple configurations simultaneously, such as using an array like type BuildOptions = {
// other options
// string | boolean is for backward compat
manifests: string | boolean | {
// 'detailed': the current manifest
// 'ssr': `build.ssrManifest`
// 'backend': `build.generateBackendIntegrationHtml`
type: 'detailed' | 'ssr' | 'backend'
path?: string
}[]
}However, introducing a new configuration option could also lead to confusion for users.
If this feature is implemented, the following code in Vite Ruby and django-vite would be reduced to just parsing JSON. |
|
Can you show how the code would be reduced on the consumer side? If we account for flexibility, eg adding custom attributes to link/scripts, changing the base of the paths, where it's injected (how should vite know it should be injected in the head or body?), then the manifest would need to be generalised further more than what you have proposed. And for me, the very-base representation is what we have now. Maybe it would be enough for the docs to show an example of generating these HTML instead of only explaining what to do? That would give a good starting point for most projects to customize however they want to, or port to another language. |
Description
Background
Vite provides the
build.manifestoption, which helps integrate with backend frameworks by describing the relationships between built JavaScript and CSS files. Backend frameworks typically parsemanifest.jsonand 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.jsonand 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 parsemanifest.jsonand 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 byinsertAdjacentHTML, 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
The text was updated successfully, but these errors were encountered: