change live-server routes

/: startpage /editor: live editor /preview: also startpage, for live editor, so that vite dev server can proxy it easier
reorx · Oct 16, 2022 · 4f2727b · 4f2727b
1 parent 2891bb3
commit 4f2727b
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 29 deletions.
diff --git a/live-server/app.js b/live-server/app.js
@@ -3,17 +3,19 @@ const { exec } = require('child_process');
 const path = require('path');
 const fs = require('fs')
 const bodyParser = require('body-parser');
+const { resolve } = require('path');
 
 const app = express()
-const port = 3000
+const port = Number(process.env.PORT || '3000')
+
+// const isDev = process.env.NODE_ENV === 'dev'
 
 // place to build sui2
 buildDir = path.resolve(__dirname, '..')
-distDir = path.resolve(buildDir, 'dist')
 console.log('buildDir', buildDir)
 
-// place to get frontend resources
-frontendDir = path.resolve(__dirname, 'frontend/dist')
+// place to get editor resources
+editorDir = path.resolve(__dirname, 'editor/dist')
 
 // place to store data generated by live-server
 dataDir = process.env.DATA_DIR || 'data'
@@ -22,14 +24,49 @@ if (!path.isAbsolute(dataDir)) {
 }
 dataFilePath = path.resolve(dataDir, 'data.json')
 console.log('dataFilePath', dataFilePath)
+outDir = path.resolve(dataDir, 'dist')
+
+// functions
+
+const buildStartpage = async (callback) => {
+  const cmd = 'npm run build'
+  const newEnv = {
+    ...process.env,
+    DATA_FILE: dataFilePath,
+    OUT_DIR: outDir,
+    NO_PWA: 1,
+  }
+  console.log(`* exec: ${cmd}`);
+  return exec(cmd, {
+    'cwd': buildDir,
+    'env': newEnv,
+  }, callback)
+}
 
 // start up check
 
+if (!fs.existsSync(dataDir)) {
+  fs.mkdirSync(dataDir)
+}
+
 if (!fs.existsSync(dataFilePath)) {
   console.log('copy example file to DATA_DIR')
   fs.copyFileSync(path.resolve(buildDir, 'data.example.json'), dataFilePath)
 }
 
+if (!fs.existsSync(path.resolve(outDir, 'index.html'))) {
+  console.log('run initial build')
+  buildStartpage((err, stdout, stderr) => {
+    if (err) {
+      console.error('build failed:', err)
+      return
+    }
+    console.log(`build result:
+stdout=${stdout}
+stderr=${stderr}`);
+  })
+}
+
 // server code
 
 app.use(bodyParser.text({type: 'text/plain'}))
@@ -56,35 +93,30 @@ app.post('/api/updateDataFile', (req, res) => {
   res.send(JSON.stringify({ok: 1}))
 })
 
-app.post('/api/build', (req, res) => {
-  const cmd = 'npm run build'
-  const newEnv = {
-    ...process.env,
-    DATA_FILE: dataFilePath,
-    NO_PWA: 1,
-  }
-  exec(cmd, {
-    'cwd': buildDir,
-    'env': newEnv,
-  }, (err, stdout, stderr) => {
+
+app.post('/api/build', async (req, res) => {
+  buildStartpage((err, stdout, stderr) => {
     if (err) {
       const errMsg = `Error: ${err}`
-      console.log(errMsg);
+      console.warn(errMsg);
       res.status(500).send(errMsg);
-      return;
+      return
     }
-    console.log(`* exec: ${cmd}`);
+
     console.log(stdout);
     res.send(`Success
 stdout: ${stdout}
 stderr: ${stderr}`);
   })
 })
 
-app.use('/', express.static(frontendDir))
+app.use('/', express.static(outDir))
+
+// /preview also serves the outDir, so that it could be proxies from vite dev server
+app.use('/preview', express.static(outDir))
 
-app.use('/preview', express.static(distDir))
+app.use('/editor', express.static(editorDir))
 
 app.listen(port, () => {
-  console.log(`Example app listening on port ${port}`)
+  console.log(`live-server app listening on port ${port}`)
 })
diff --git a/live-server/frontend/index.html → live-server/editor/index.html b/live-server/frontend/index.html → live-server/editor/index.html
@@ -4,21 +4,21 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>SUI2 Live Editor</title>
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
   <div class="main">
     <div class="left">
       <div class="header">
-        <h2>SUI Data Editor</h2>
+        <h2>SUI Live Editor</h2>
         <button class="fn-build">Build</button>
       </div>
       <div class="editor"></div>
     </div>
     <div class="right">
-      <iframe id="preview" src="preview" frameborder="0"></iframe>
+      <iframe id="preview" src="/preview" frameborder="0"></iframe>
     </div>
   </div>
 

diff --git a/live-server/frontend/main.js → live-server/editor/main.js b/live-server/frontend/main.js → live-server/editor/main.js
diff --git a/live-server/frontend/styles.css → live-server/editor/styles.css b/live-server/frontend/styles.css → live-server/editor/styles.css
diff --git a/live-server/package.json b/live-server/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev-backend": "nodemon --watch app.js app.js",
     "dev": "vite --host",
-    "build": "rm -rf frontend/dist && vite build"
+    "clean": "rm -rf data editor/dist",
+    "build": "npm run clean && vite build"
   },
   "dependencies": {
     "express": "^4.18.1",

diff --git a/live-server/vite.config.js b/live-server/vite.config.js
@@ -3,9 +3,8 @@ import { resolve } from 'path'
 
 
 export default defineConfig({
-  root: "frontend",
-  // use relative path for assets
-  base: "",
+  root: "editor",
+  base: "/editor/",
   build: {
     rolupOptions: {
       input: {
@@ -20,7 +19,7 @@ export default defineConfig({
       },
       '/preview': {
         target: 'http://localhost:3000',
-      }
+      },
     }
   }
 })
diff --git a/vite.config.js b/vite.config.js
@@ -7,6 +7,7 @@ import { getIconSVG } from './icons'
 
 // envs
 const DATA_FILE = process.env.DATA_FILE,
+  OUT_DIR = process.env.OUT_DIR,
   WEBMANIFEST_NAME = process.env.WEBMANIFEST_NAME,
   WEBMANIFEST_DESCRIPTION = process.env.WEBMANIFEST_DESCRIPTION,
   WEBMANIFEST_SHORT_NAME = process.env.WEBMANIFEST_SHORT_NAME,
@@ -55,6 +56,7 @@ export default defineConfig({
   build: {
     // put assets in the same folder as index.html
     assetsDir: ".",
+    outDir: OUT_DIR || 'dist',
     rollupOptions: {
       input: {
         main: resolve(__dirname, 'index.html'),