Timur233 · k0ndratov · Oct 25, 2024
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,4 @@ node_modules/
 .vscode
 dist
 tmp
-lerna-debug.log
+lerna-debug.log
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -15,7 +15,7 @@
     <title>Falcon Tanks</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root"><!--ssr-outlet--></div>
     <div id="modal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/packages/client/index.js b/packages/client/index.js
@@ -0,0 +1,2 @@
+// index.js
+// Necessary for correct operation of modules
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "build:ssr": "tsc && vite build --config ssr.config.ts",
     "preview": "vite preview",
     "lint": "eslint . && prettier .",
     "format": "prettier --write .",

diff --git a/packages/client/src/main.tsx b/packages/client/src/main.tsx
@@ -1,14 +1,15 @@
+import '@/scss/styles.scss'
+import { store } from '@/store'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux'
-import { store } from '@/store'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 import App from './app/App'
-import '@/scss/styles.scss'
 import { registerServiceWorker } from './registerServiceWorker'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.hydrateRoot(
+  document.getElementById('root') as HTMLElement as HTMLElement,
   <React.StrictMode>
     <Provider store={store}>
       <App />

diff --git a/packages/client/ssr.config.ts b/packages/client/ssr.config.ts
@@ -0,0 +1,25 @@
+import react from '@vitejs/plugin-react'
+import * as path from 'path'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'ssr.tsx'),
+      name: 'Client',
+      formats: ['cjs'],
+    },
+    rollupOptions: {
+      output: {
+        dir: 'ssr-dist',
+      },
+    },
+  },
+})
diff --git a/packages/client/ssr.tsx b/packages/client/ssr.tsx
@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom/server'
+import App from './src/app/App'
+import './src/scss/styles.scss'
+
+export const render = () => ReactDOM.renderToString(<App />)
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
@@ -19,6 +19,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"],
+  "include": ["src", "ssr.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import dotenv from 'dotenv'
-dotenv.config()
 import path from 'path'
+import { defineConfig } from 'vite'
+dotenv.config()
 
 // https://vitejs.dev/config/
 export default defineConfig({

diff --git a/packages/server/.gitignore b/packages/server/.gitignore
@@ -0,0 +1,2 @@
+dist
+ssr-dist
diff --git a/packages/server/index.ts b/packages/server/index.ts
@@ -1,20 +1,60 @@
-import dotenv from 'dotenv'
 import cors from 'cors'
+import dotenv from 'dotenv'
+import fs from 'node:fs'
+import path from 'node:path'
 dotenv.config()
 
 import express from 'express'
-import { createClientAndConnect } from './db'
+// import { createClientAndConnect } from './db'
+
+const startServer = () => {
+  const app = express()
+  app.use(cors())
+  const port = Number(process.env.SERVER_PORT) || 3001
+
+  // createClientAndConnect()
+
+  app.get('/api', (_, res) => {
+    res.json('👋 Howdy from the server :)')
+  })
+
+  app.use('*', async (_, res) => {
+    global.window = {} as Window & typeof globalThis
+    ;(global.Image as unknown) = class {
+      constructor() {
+        // Добавьте любую необходимую реализацию или оставьте пустой класс
+      }
+    }
+    global.document = {} as Document
+
+    const distPath = path.dirname(
+      require.resolve('falcon-tanks/dist/index.html')
+    )
 
-const app = express()
-app.use(cors())
-const port = Number(process.env.SERVER_PORT) || 3001
+    const ssrClientPath = require.resolve(
+      'falcon-tanks/ssr-dist/falcon-tanks.cjs'
+    )
 
-createClientAndConnect()
+    try {
+      const template = fs.readFileSync(
+        path.resolve(distPath, 'index.html'),
+        'utf-8'
+      )
+      const { render } = await import(ssrClientPath)
+      const appHtml = await render()
+      const html = template.replace('<!--ssr-outlet-->', appHtml)
+      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+    } catch (e) {
+      console.log('error in try catch: ', e)
+      // vite.ssrFixStacktrace(e)
+      // next(e)
+    }
+  })
 
-app.get('/', (_, res) => {
-  res.json('👋 Howdy from the server :)')
-})
+  app.listen(port, () => {
+    console.log(`  ➜ 🎸 Server is listening on port: ${port}`)
+  })
+}
 
-app.listen(port, () => {
-  console.log(`  ➜ 🎸 Server is listening on port: ${port}`)
-})
+console.log('start')
+startServer()
diff --git a/packages/server/package.json b/packages/server/package.json
@@ -3,21 +3,23 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "build": "tsc --p ./tsconfig.prod.json",
+    "build": "rm -rf dist && tsc --p ./tsconfig.prod.json",
     "preview": "node ./dist/index.js",
     "dev": "cross-env NODE_ENV=development nodemon index.ts",
     "lint": "eslint .",
     "format": "prettier --write .",
     "test": "jest ."
   },
   "dependencies": {
+    "@types/node": "^22.7.9",
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.2",
     "eslint-config-prettier": "^8.5.0",
     "express": "^4.18.1",
     "pg": "^8.8.0",
-    "prettier": "^2.7.1"
+    "prettier": "^2.7.1",
+    "vite": "^5.4.10"
   },
   "devDependencies": {
     "@types/cors": "^2.8.12",

diff --git a/packages/server/tsconfig.json b/packages/server/tsconfig.json
@@ -3,6 +3,7 @@
     "composite": true,
     "target": "es2019",
     "module": "commonjs",
+    "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
     "sourceMap": true,
@@ -18,7 +19,7 @@
     "noUnusedLocals": true,
     "forceConsistentCasingInFileNames": true,
     "importsNotUsedAsValues": "error",
-    "lib": ["es2019", "esnext.asynciterable"],
+    "lib": ["es2019", "esnext.asynciterable", "DOM"],
     "types": ["node", "jest"],
     "baseUrl": ".",
     "paths": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,4 @@ node_modules/ @@
     .vscode
     dist
     tmp
-    lerna-debug.log
+    lerna-debug.log
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// index.js
		// Necessary for correct operation of modules