> A plugin intergrate with backend served template of `vite HMR`
npm install vite-plugin-dev-backend-intergration> A plugin intergrate with backend served template of vite HMR
``bash
yarn add vite-plugin-dev-backend-intergration
//or
npm i vite-plugin-dev-backend-intergration
`
`js
import { defineConfig } from "vite";
import path from "path";
import viteBackendIntegration, {
createEntryPoint,
} from "vite-plugin-dev-backend-intergration";
const entryPoint = createEntryPoint({
root: process.cwd(),
input: "./src/app/main.js",
output: "path/to/output/app/main.js",
});
const extraDeps = ["path/to/dep.js", "path/to/dep.css", "path/to/dep.scss"];
extraDeps.forEach((dep) => entryPoint.add(dep));
const entryPoints = [entryPoint];
export default defineConfig({
server: { port: 3000 },
plugins: [viteBackendIntegration(entryPoints)],
});
`
For some reasons, our application has to use a backend rendering mode, such as the phoenixframework/phoenix. At the same time, the front-end wants to use vite as the dev server with HMR, which is a conflict. Now, using vite-plugin-dev-backend-integration can help solve this problem.
For example (phoenixframework/phoenix)
Your backend served template (layout.html.eex)
`html`
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
<%= render view_module(@conn), view_template(@conn), assigns %>
`jssrc/app/main.js
//
import "./style.scss";
import App from "./App";
if (_global_configs.serverEnv == "dev") {
import("./createDevApp").then(({ createApp }) => {
createApp(Component);
});
} else if (_global_configs.serverEnv == "pros") {
import("./createApp").then(({ createApp }) => {
createApp(Component);
});
}
`
the plugin will generate an 'empty' bundle with these codes
`js`
// priv/static/app/main.js
(async () => {
// load vite client , which can enable hmr
await import("http://{host}:{port}/@vite/client");
//load deps before entry , if have deps
await import("http://{host}:{port}/path/to/dep.js");
await import("http://{host}:{port}/path/to/dep.css");
await import("http://{host}:{port}/path/to/dep.js");
// load entry
await import("http://{host}:{port}/src/app/main.js");
})();
now you can work with vite HMR` in your backend project