vite-plugin-dev-backend-intergration

> A plugin intergrate with backend served template of vite HMR

Install

``bash

yarn add vite-plugin-dev-backend-intergration

//or
npm i vite-plugin-dev-backend-intergration

`

Use

`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)],
});
`

Movitation

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 %>



`

`js
//src/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