enhance: Vite HMR while yarn dev, and more build tuning (#9361)

* enhance: Vite HMR while yarn dev, and more build tuning

* use localhost

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

3 files changed, 26 insertions, 7 deletions

diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index 58452ae826..c537d9a369 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -12,6 +12,7 @@ import { In, IsNull } from 'typeorm';
 import fastifyStatic from '@fastify/static';
 import fastifyView from '@fastify/view';
 import fastifyCookie from '@fastify/cookie';
+import fastifyProxy from '@fastify/http-proxy';
 import type { Config } from '@/config.js';
 import { getNoteSummary } from '@/misc/get-note-summary.js';
 import { DI } from '@/di-symbols.js';
@@ -39,6 +40,7 @@ const staticAssets = `${_dirname}/../../../assets/`;
 const clientAssets = `${_dirname}/../../../../client/assets/`;
 const assets = `${_dirname}/../../../../../built/_client_dist_/`;
 const swAssets = `${_dirname}/../../../../../built/_sw_dist_/`;
+const viteOut = `${_dirname}/../../../../../built/_vite_/`;
 
 @Injectable()
 export class ClientServerService {
@@ -151,9 +153,6 @@ export class ClientServerService {
 			},
 			defaultContext: {
 				version: this.config.version,
-				getClientEntry: () => process.env.NODE_ENV === 'production' ?
-					this.config.clientEntry :
-					JSON.parse(readFileSync(`${_dirname}/../../../../../built/_client_dist_/manifest.json`, 'utf-8'))['src/init.ts'],
 				config: this.config,
 			},
 		});
@@ -164,6 +163,23 @@ export class ClientServerService {
 			done();
 		});
 
+		//#region vite assets
+		if (this.config.clientManifestExists) {
+			fastify.register(fastifyStatic, {
+				root: viteOut,
+				prefix: '/vite/',
+				maxAge: ms('30 days'),
+				decorateReply: false,
+			});
+		} else {
+			fastify.register(fastifyProxy, {
+				upstream: 'http://localhost:5173', // TODO: port configuration
+				prefix: '/vite',
+				rewritePrefix: '/vite',
+			});
+		}
+		//#endregion
+
 		//#region static assets
 
 		fastify.register(fastifyStatic, {
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index ffd8b8941c..86df3308ec 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -57,7 +57,7 @@
 
 	//#region Script
 	function importAppScript() {
-		import(`/assets/${CLIENT_ENTRY}`)
+		import(`/vite/${CLIENT_ENTRY}`)
 			.catch(async e => {
 				await checkUpdate();
 				console.error(e);
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 1b3ac82d2e..0c3c5c9b7e 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -1,7 +1,7 @@
 block vars
 
 block loadClientEntry
-	- const clientEntry = getClientEntry();
+	- const clientEntry = config.clientEntry;
 
 doctype html
 
@@ -35,11 +35,14 @@ html
 		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
 		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.css')
-		link(rel='modulepreload' href=`/assets/${clientEntry.file}`)
+		link(rel='modulepreload' href=`/vite/${clientEntry.file}`)
+
+		if !config.clientManifestExists
+				script(type="module" src="/vite/@vite/client")
 
 		if Array.isArray(clientEntry.css)
 			each href in clientEntry.css
-				link(rel='stylesheet' href=`/assets/${href}`)
+				link(rel='stylesheet' href=`/vite/${href}`)
 
 		title
 			block title