feat: Add vite to dashboard

src/api/status/.gitignore

@@ -1,2 +1,5 @@
 # This folder is generated by compiling scss
 public/assets/css
+
+# This is vite build output
+public/dist

src/api/status/Dockerfile

@@ -9,7 +9,7 @@ COPY --chown=node:node . .
 
 RUN npm install --only=production --no-package-lock
 
-RUN npm run compile:scss
+RUN npm run build
 
 USER node
 

src/api/status/package.json

@@ -4,8 +4,11 @@
   "version": "1.0.0",
   "description": "A service for getting the status of our services",
   "scripts": {
-    "dev": "npm run compile:scss && env-cmd -f env.local nodemon src/server.js",
+    "dev": "concurrently \"npm run watch:js\"  \"npm run compile:scss\" \"env-cmd -f env.local nodemon src/server.js\"",
+    "build": "npm run compile:js && npm run compile:scss",
     "start": "node src/server.js",
+    "compile:js": "vite build",
+    "watch:js": "vite build --watch",
     "compile:scss": "sass ./scss/material-dashboard.scss:./public/assets/css/material-dashboard.css",
     "watch:scss": "sass --watch ./scss/material-dashboard.scss:./public/assets/css/material-dashboard.css"
   },
@@ -19,12 +22,14 @@
     "@senecacdot/satellite": "^1.x",
     "express": "4.17.2",
     "express-handlebars": "6.0.2",
-    "sass": "1.45.2"
+    "sass": "1.45.2",
+    "vite": "^2.7.13"
   },
   "engines": {
     "node": ">=12.0.0"
   },
   "devDependencies": {
+    "concurrently": "^7.0.0",
     "env-cmd": "10.1.0",
     "nodemon": "2.0.15"
   }

src/api/status/src/server.js

@@ -2,12 +2,23 @@ const { Satellite } = require('@senecacdot/satellite');
 const { static: serveStatic } = require('express');
 const path = require('path');
 const { engine } = require('express-handlebars');
+const fs = require('fs/promises');
 const { check } = require('./services');
 const getGitHubData = require('./js/github-stats');
 const getFeedCount = require('./js/feed-stats');
 const getPostsCount = require('./js/posts-stats');
 const getJobCount = require('./js/queue-stats');
 
+/**
+ * @param {string} filePath a key in manifest.json of Vite
+ * @returns {Promise<string>} the path to the bundled js file
+ */
+const getViteJsPath = async (filePath) => {
+  const manifestBuffer = await fs.readFile(path.join(__dirname, '../public/dist/manifest.json'));
+  const manifest = JSON.parse(manifestBuffer);
+  return `dist/${manifest[filePath].file}`;
+};
+
 // We need to be able to talk to the autodeployment server
 const autodeploymentHost = process.env.WEB_URL || 'localhost';
 
@@ -80,42 +91,53 @@ service.router.get(`${process.env.PATH_PREFIX || ''}/status`, (req, res) => {
 
 // Get Home page
 service.router.get(process.env.PATH_PREFIX || '/', async (req, res) => {
-  let telescope;
-  let satellite;
-  let totalPost;
-  let totalFeeds;
-  let jobCount;
   try {
-    [telescope, satellite, totalPost, totalFeeds, jobCount] = await Promise.all([
+    const [telescope, satellite, totalPost, totalFeeds, jobCount] = await Promise.all([
       getGitHubData('Seneca-CDOT', 'telescope'),
       getGitHubData('Seneca-CDOT', 'satellite'),
       getPostsCount(),
       getFeedCount(),
       getJobCount(),
     ]);
+
+    let environment = {};
+    if (process.env.STATUS_URL === 'https://api.telescope.cdot.systems/v1/status')
+      environment = { name: 'production', staging: false };
+    else environment = { name: 'staging', staging: true };
+
+    const entryJsPath = await getViteJsPath('public/js/pages/dashboard.js');
+
+    res.render('status', {
+      entry_js_path: entryJsPath,
+      active_dashboard: true,
+      headers: { title: 'Telescope Dashboard' },
+      telescope: { ...telescope, title: 'Telescope' },
+      satellite: { ...satellite, title: 'Satellite' },
+      totalPost,
+      totalFeeds,
+      jobCount,
+      environment,
+    });
   } catch (e) {
     console.error(e);
+    res.status(500).send('Fail to render /');
   }
-  let environment = {};
-  if (process.env.STATUS_URL === 'https://api.telescope.cdot.systems/v1/status')
-    environment = { name: 'production', staging: false };
-  else environment = { name: 'staging', staging: true };
-
-  res.render('status', {
-    active_dashboard: true,
-    headers: { title: 'Telescope Dashboard' },
-    telescope: { ...telescope, title: 'Telescope' },
-    satellite: { ...satellite, title: 'Satellite' },
-    totalPost,
-    totalFeeds,
-    jobCount,
-    environment,
-  });
 });
 
 // Get Build page
-service.router.get(`${process.env.PATH_PREFIX || ''}/build`, (req, res) => {
-  res.render('builds', { active_build_log: true, headers: { title: 'Telescope Build log' } });
+service.router.get(`${process.env.PATH_PREFIX || ''}/build`, async (req, res) => {
+  try {
+    const entryJsPath = await getViteJsPath('public/js/pages/build.js');
+
+    res.render('builds', {
+      entry_js_path: entryJsPath,
+      active_build_log: true,
+      headers: { title: 'Telescope Build log' },
+    });
+  } catch (error) {
+    console.error(error);
+    res.status(500).send('Fail to render /build');
+  }
 });
 
 const port = parseInt(process.env.STATUS_PORT || 1111, 10);

src/api/status/src/views/builds.hbs

@@ -92,4 +92,4 @@
 <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.4.0/lib/xterm-addon-web-links.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/xterm-addon-webgl@0.11.3/lib/xterm-addon-webgl.min.js"></script>
-<script type="module" src="js/pages/build.js"></script>
+<script type="module" src="{{  entry_js_path }}"></script>

src/api/status/src/views/layouts/main.hbs

@@ -4,7 +4,5 @@
 <body class="g-sidenav-show bg-gray-200">
     {{> _toast}}
     {{{body}}}
-    {{!-- Telescope JS files --}}
-    <script type="module" src="js/utils/toast.js"></script>
 </body>
 </html>

src/api/status/src/views/status.hbs

@@ -298,4 +298,4 @@
 <script src="assets/js/material-dashboard.min.js?v=3.0.0"></script>
 
 <!-- API Dashboard -->
-<script type="module" src="js/pages/dashboard.js"></script>
+<script type="module" src="{{ entry_js_path }}"></script>

src/api/status/vite.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+
+// vite.config.js
+export default defineConfig({
+  build: {
+    outDir: './public/dist',
+    // generate manifest.json in outDir
+    manifest: true,
+    rollupOptions: {
+      // overwrite default .html entry
+      input: ['./public/js/pages/dashboard.js', './public/js/pages/build.js'],
+    },
+  },
+});