Merge pull request #15 from Jalle19/http-server-tweaks

Make web interface actually build, make web server serve it

src/http/server.ts

@@ -1,42 +1,63 @@
+import fs from 'fs'
+import path from 'path'
 import { IncomingMessage, RequestListener, ServerResponse } from 'http'
 import { promises as fsPromisified } from 'fs'
 
+const basePath = __dirname + '/../../webif/build'
+
+const mimeTypes = new Map<string, string>([
+  ['.html', 'text/html'],
+  ['.js', 'text/javascript'],
+  ['.css', 'text/css'],
+  ['.json', 'application/json'],
+  ['.png', 'image/png'],
+])
+
 export const httpRequestHandler: RequestListener = async (req: IncomingMessage, res: ServerResponse) => {
-  // Main routing logic
-  let reqUrl = req.url
+  const filePath = resolveFilePath(req.url)
+
+  // Serve 404 if file doesn't exist
+  if (!fs.existsSync(filePath)) {
+    res.writeHead(404)
+    res.end('Not found')
+    return
+  }
+
+  // File exists, try to determine MIME type
+  const extension = path.extname(filePath).toLowerCase()
+  const mimeType = mimeTypes.get(extension)
+
+  await serveStaticFile(filePath, mimeType, res)
+}
+
+const resolveFilePath = (reqUrl: string | undefined): string => {
+  // Strip query parameters
   if (reqUrl?.indexOf('?') !== -1) {
     reqUrl = reqUrl?.substring(0, reqUrl?.indexOf('?'))
   }
 
-  switch (reqUrl) {
-    case '/':
-    case '/index.html':
-      await serveStaticFile('index.html', 'text/html', res)
-      break
-    case '/eachwatt.css':
-      await serveStaticFile('eachwatt.css', 'text/css', res)
-      break
-    case '/eachwatt.js':
-      await serveStaticFile('eachwatt.js', 'text/javascript', res)
-      break
-    case '/eachwatt_logo.png':
-      await serveStaticFile('eachwatt_logo.png', 'image/png', res)
-      break
-    default:
-      res.writeHead(404)
-      res.end('Not found')
-      break
+  // "Convert" to file path
+  let filePath
+  if (!reqUrl || reqUrl === '/') {
+    filePath = '/index.html'
+  } else {
+    filePath = reqUrl
   }
-}
 
-const resolveFilePath = (file: string): string => {
-  return __dirname + '/../../webif/' + file
+  return basePath + filePath
 }
 
-const serveStaticFile = async (file: string, contentType: string, res: ServerResponse): Promise<void> => {
-  const fileContents = await fsPromisified.readFile(resolveFilePath(file))
+const serveStaticFile = async (
+  filePath: string,
+  contentType: string | undefined,
+  res: ServerResponse,
+): Promise<void> => {
+  const fileContents = await fsPromisified.readFile(filePath)
+
+  if (contentType !== undefined) {
+    res.setHeader('Content-Type', contentType)
+  }
 
-  res.setHeader('Content-Type', contentType)
   res.writeHead(200)
   res.end(fileContents)
 }

webif/package.json

@@ -13,7 +13,7 @@
     "prettier-check": "prettier --check src/"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "^1.20.4",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",

webif/src/routes/+page.svelte

@@ -56,9 +56,7 @@
             return d.circuit.type === 'main' && d.circuit.sensor.type !== 'unmetered'
           })
 
-          circuitSensorData = message.data.filter((d) => {
-            return d.circuit.type === 'circuit'
-          })
+          circuitSensorData = message.data
           break
         case 'configuration':
           configuration = message.data

webif/svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto'
+import adapter from '@sveltejs/adapter-static'
 import { vitePreprocess } from '@sveltejs/kit/vite'
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -8,10 +8,9 @@ const config = {
   preprocess: vitePreprocess(),
 
   kit: {
-    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
-    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
-    adapter: adapter(),
+    adapter: adapter({
+      fallback: 'index.html'
+    }),
   },
 }