feat: implement frontend server with static file serving and API configuration

Author: enjoy15

chat-app/frontend/Dockerfile

@@ -5,6 +5,12 @@ const statusEl = document.querySelector('#status');
 const messagesEl = document.querySelector('#messages');
 const refreshButton = document.querySelector('#refresh-button');
 
+const API_BASE_URL = (window.API_BASE_URL || '').replace(/\/$/, '');
+
+function apiUrl(path) {
+  return `${API_BASE_URL}${path}`;
+}
+
 let lastMessageCount = 0;
 
 function setStatus(message, type = '') {
@@ -54,7 +60,7 @@ function escapeHtml(value) {
 }
 
 async function loadMessages() {
-  const response = await fetch('/api/messages');
+  const response = await fetch(apiUrl('/api/messages'));
 
   if (!response.ok) {
     throw new Error('Could not load messages');
@@ -78,7 +84,7 @@ async function sendMessage(event) {
   setStatus('Sending message...');
 
   try {
-    const response = await fetch('/api/messages', {
+    const response = await fetch(apiUrl('/api/messages'), {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

chat-app/frontend/app.js

@@ -49,6 +49,7 @@ <h2>Messages</h2>
       </section>
     </main>
 
+    <script src="config.js"></script>
     <script src="app.js"></script>
   </body>
 </html>

chat-app/frontend/index.html

@@ -2,9 +2,13 @@
   "name": "chat-app-frontend",
   "version": "1.0.0",
   "description": "Frontend for chat app",
-  "main": "app.js",
+  "main": "server.js",
   "keywords": ["chat", "frontend"],
   "author": "",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node server.js"
+  },
   "license": "UNLICENSED",
   "private": true,
   "dependencies": {}

chat-app/frontend/package.json

@@ -0,0 +1,70 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const PORT = process.env.PORT || 3000;
+const API_BASE_URL = (process.env.API_BASE_URL || '').replace(/\/$/, '');
+const PUBLIC_DIR = __dirname;
+
+const contentTypes = {
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.js': 'application/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.ico': 'image/x-icon',
+};
+
+function send(res, statusCode, body, contentType = 'text/plain; charset=utf-8') {
+  res.writeHead(statusCode, { 'Content-Type': contentType });
+  res.end(body);
+}
+
+function readFile(filePath) {
+  return fs.readFileSync(filePath);
+}
+
+function serveFile(res, filePath) {
+  try {
+    const ext = path.extname(filePath).toLowerCase();
+    const contentType = contentTypes[ext] || 'application/octet-stream';
+    const body = readFile(filePath);
+    res.writeHead(200, { 'Content-Type': contentType });
+    res.end(body);
+  } catch {
+    send(res, 404, 'Not found');
+  }
+}
+
+const server = http.createServer((req, res) => {
+  const urlPath = new URL(req.url, `http://${req.headers.host}`).pathname;
+
+  if (urlPath === '/config.js') {
+    const config = `window.API_BASE_URL = ${JSON.stringify(API_BASE_URL)};\n`;
+    return send(res, 200, config, 'application/javascript; charset=utf-8');
+  }
+
+  const safePath = urlPath === '/' ? '/index.html' : urlPath;
+  const filePath = path.join(PUBLIC_DIR, safePath);
+
+  if (!filePath.startsWith(PUBLIC_DIR)) {
+    return send(res, 403, 'Forbidden');
+  }
+
+  if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+    return serveFile(res, filePath);
+  }
+
+  if (urlPath === '/' || urlPath === '/index.html') {
+    return serveFile(res, path.join(PUBLIC_DIR, 'index.html'));
+  }
+
+  send(res, 404, 'Not found');
+});
+
+server.listen(PORT, () => {
+  console.log(`Frontend running at http://localhost:${PORT}`);
+});