diff --git a/.prettierrc b/.prettierrc
index 1d2699e4..cc9f2966 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,6 @@
"tabWidth": 2,
"semi": true,
"singleQuote": false,
- "printWidth": 120
+ "printWidth": 120,
+ "endOfLine": "auto"
}
diff --git a/packages/vanilla/package.json b/packages/vanilla/package.json
index 0916430b..085efd47 100644
--- a/packages/vanilla/package.json
+++ b/packages/vanilla/package.json
@@ -5,8 +5,8 @@
"type": "module",
"scripts": {
"dev": "vite --port 5173",
- "dev:ssr": "PORT=5174 node server.js",
- "build:client": "rm -rf ./dist/vanilla && vite build --outDir ./dist/vanilla && cp ./dist/vanilla/index.html ./dist/vanilla/404.html",
+ "dev:ssr": "set PORT=5174&& node server.js",
+ "build:client": "rmdir /s /q .\\dist\\vanilla 2>nul & node .\\node_modules\\vite\\bin\\vite.js build --outDir .\\dist\\vanilla & copy /Y .\\dist\\vanilla\\index.html .\\dist\\vanilla\\404.html >nul",
"build:client-for-ssg": "rm -rf ../../dist/vanilla && vite build --outDir ../../dist/vanilla",
"build:server": "vite build --outDir ./dist/vanilla-ssr --ssr src/main-server.js",
"build:ssg": "pnpm run build:client-for-ssg && node static-site-generate.js",
diff --git a/packages/vanilla/server.js b/packages/vanilla/server.js
index b9a56d98..35d36415 100644
--- a/packages/vanilla/server.js
+++ b/packages/vanilla/server.js
@@ -1,34 +1,63 @@
import express from "express";
+import fs from "node:fs/promises";
const prod = process.env.NODE_ENV === "production";
const port = process.env.PORT || 5173;
const base = process.env.BASE || (prod ? "/front_6th_chapter4-1/vanilla/" : "/");
-
+const templateHtml = prod ? await fs.readFile("./dist/client/index.html", "utf-8") : "";
const app = express();
-const render = () => {
- return `안녕하세요
`;
-};
-
-app.get("*all", (req, res) => {
- res.send(
- `
-
-
-
-
-
- Vanilla Javascript SSR
-
-
-${render()}
-
-
- `.trim(),
- );
+/** @type {import('vite').ViteDevServer | undefined} */
+let vite;
+if (!prod) {
+ const { createServer } = await import("vite");
+ vite = await createServer({
+ server: { middlewareMode: true },
+ appType: "custom",
+ base,
+ });
+ app.use(vite.middlewares);
+} else {
+ const compression = (await import("compression")).default;
+ const sirv = (await import("sirv")).default;
+ app.use(compression());
+ app.use(base, sirv("./dist/client", { extensions: [] }));
+}
+
+// Serve HTML
+app.use("*all", async (req, res) => {
+ try {
+ const url = req.originalUrl.replace(base, "");
+
+ /** @type {string} */
+ let template;
+ /** @type {import('./src/entry-server.js').render} */
+ let render;
+ if (!prod) {
+ // Always read fresh template in development
+ template = await fs.readFile("./index.html", "utf-8");
+ template = await vite.transformIndexHtml(url, template);
+ render = (await vite.ssrLoadModule("/src/main-server.js")).render;
+ } else {
+ template = templateHtml;
+ render = (await import("./dist/server/main-server.js")).render;
+ }
+
+ const rendered = await render(url);
+
+ const html = template
+ .replace(``, rendered.head ?? "")
+ .replace(``, rendered.html ?? "");
+
+ res.status(200).set({ "Content-Type": "text/html" }).send(html);
+ } catch (e) {
+ vite?.ssrFixStacktrace(e);
+ console.log(e.stack);
+ res.status(500).end(e.stack);
+ }
});
// Start http server
app.listen(port, () => {
- console.log(`React Server started at http://localhost:${port}`);
+ console.log(`Server started at http://localhost:${port}`);
});