Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-06-12 10:50:06 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-06-12 10:50:06 -0700
commit16fc0bf7938071b400364d705f9ac859068be5f3 (patch)
tree94c16f2c477dbf1d6e2b4e9e11403f1f5f01fc68
parent333931c82cd3c9aee6d09319a273c9735a0fdca8 (diff)
WIP: modify dev server to use as test server, also
Diffstat
-rw-r--r--esbuild-server.mjs144
-rw-r--r--public/index.html5
-rw-r--r--src/index.js6
-rw-r--r--test/integration/setup.cjs2
4 files changed, 94 insertions, 63 deletions
diff --git a/esbuild-server.mjs b/esbuild-server.mjs
index 906ff63..bf73692 100644
--- a/esbuild-server.mjs
+++ b/esbuild-server.mjs
@@ -22,6 +22,7 @@ const mime = {
'.jpg': 'image/jpeg',
'.css': 'text/css; charset=utf-8',
'.html': 'text/html; charset=utf-8',
+ '.js': 'text/javascript; charset=utf-8',
};
function createServerSentEventHandler() {
@@ -220,7 +221,7 @@ const externalSvgToInternal = {
}
}
-const ctx = await esbuild.context({
+const buildOptions = {
entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js'],
bundle: true,
outdir: 'build',
@@ -233,66 +234,95 @@ const ctx = await esbuild.context({
'.svg': 'file'
},
assetNames: 'assets/images/[name]-[hash]',
-});
-
-await ctx.watch();
-
-const { host, port } = await ctx.serve({
- servedir: 'build',
- port: 3000,
- // onRequest: function({ remoteAddress, method, path, status, timeInMS }) {
- // let statusColor = colors.red;
-
- // if (status >= 200 && status <= 299) {
- // statusColor = colors.green;
- // } else if (status >= 300 && status <= 399) {
- // statusColor = colors.yellow;
- // }
-
- // console.log(`${colors.dim}${remoteAddress} - "${method} ${path}" ${colors.normal}${statusColor}${status}${colors.reset}${colors.dim} [${timeInMS}ms]${colors.reset}`);
- // },
-});
-
-http.createServer((req, res) => {
- const options = {
- hostname: host,
- port: port,
- path: req.url,
- method: req.method,
- headers: req.headers,
- }
+};
- const filename = req.url && req.url !== '/' ? req.url : 'index.html';
- const filepath = path.join(__dirname, 'public', filename);
+if (process.env.NODE_ENV === 'test') {
+ http.createServer((req, res) => {
+ const filename = req.url && req.url !== '/' ? req.url : 'index.html';
+ const filepath = ['public', 'build'].map(dir => path.join(__dirname, dir, filename)).find(fp => fs.existsSync(fp));
- if (fs.existsSync(filepath)) {
- const readStream = fs.createReadStream(filepath, { autoClose: true });
+ if (filepath) {
+ const readStream = fs.createReadStream(filepath, { autoClose: true });
- readStream.on('ready', () => {
- const type = mime[path.parse(filepath).ext] || 'application/octet-stream';
- console.log(`${req.method} ${req.url} => 200 ${type}`);
- res.writeHead(200, { 'content-type': type });
- readStream.pipe(res, { end: true });
- });
+ readStream.on('ready', () => {
+ const type = mime[path.parse(filepath).ext] || 'text/plain';
+ res.writeHead(200, { 'content-type': type });
+ readStream.pipe(res, { end: true });
+ });
- readStream.on('error', err => {
- console.log(`${req.method} ${req.url} => 500 ${filepath} ${err.name}`);
- res.writeHead(500, err.name);
- res.end(JSON.stringify(err));
- });
- } else {
- const proxyReq = http.request(options, proxyRes => {
- const type = proxyRes.headers['content-type'];
- console.log(`${req.method} ${req.url} => ${proxyRes.statusCode} ${type} via esbuild`);
- res.writeHead(proxyRes.statusCode, { 'content-type': type });
- // if (req.url === '/esbuild') buildListeners.setupConnection(req, res);
- proxyRes.pipe(res);
- });
+ readStream.on('error', err => {
+ res.writeHead(500, err.name);
+ res.end(JSON.stringify(err));
+ });
+ } else {
+ res.writeHead(404, { 'content-type': 'text/plain' });
+ res.end("Not found");
+ }
+ }).listen(3005, () => {
+ console.log('test server is online');
+ });
+} else {
+ buildOptions.define = { 'window.IS_DEV': 'true' };
+ const ctx = await esbuild.context(buildOptions);
+ await ctx.watch();
+
+ const { host, port } = await ctx.serve({
+ servedir: 'build',
+ port: 3000,
+ // onRequest: function({ remoteAddress, method, path, status, timeInMS }) {
+ // let statusColor = colors.red;
+
+ // if (status >= 200 && status <= 299) {
+ // statusColor = colors.green;
+ // } else if (status >= 300 && status <= 399) {
+ // statusColor = colors.yellow;
+ // }
+
+ // console.log(`${colors.dim}${remoteAddress} - "${method} ${path}" ${colors.normal}${statusColor}${status}${colors.reset}${colors.dim} [${timeInMS}ms]${colors.reset}`);
+ // },
+ });
+
+ http.createServer((req, res) => {
+ const options = {
+ hostname: host,
+ port: port,
+ path: req.url,
+ method: req.method,
+ headers: req.headers,
+ }
+
+ const filename = req.url && req.url !== '/' ? req.url : 'index.html';
+ const filepath = path.join(__dirname, 'public', filename);
+
+ if (fs.existsSync(filepath)) {
+ const readStream = fs.createReadStream(filepath, { autoClose: true });
+
+ readStream.on('ready', () => {
+ const type = mime[path.parse(filepath).ext] || 'application/octet-stream';
+ console.log(`${req.method} ${req.url} => 200 ${type}`);
+ res.writeHead(200, { 'content-type': type });
+ readStream.pipe(res, { end: true });
+ });
- req.pipe(proxyReq, { end: true });
- }
-}).listen(8080, (e) => {
- console.log('server is online', e);
-});
+ readStream.on('error', err => {
+ console.log(`${req.method} ${req.url} => 500 ${filepath} ${err.name}`);
+ res.writeHead(500, err.name);
+ res.end(JSON.stringify(err));
+ });
+ } else {
+ const proxyReq = http.request(options, proxyRes => {
+ const type = proxyRes.headers['content-type'];
+ console.log(`${req.method} ${req.url} => ${proxyRes.statusCode} ${type} via esbuild`);
+ res.writeHead(proxyRes.statusCode, { 'content-type': type });
+ // if (req.url === '/esbuild') buildListeners.setupConnection(req, res);
+ proxyRes.pipe(res);
+ });
+
+ req.pipe(proxyReq, { end: true });
+ }
+ }).listen(8080, (e) => {
+ console.log('server is online', e);
+ });
+}
// console.log(`${process.env.NODE_ENV === 'test' ? 'Test' : 'Development'} server running at ${server.url}`);
diff --git a/public/index.html b/public/index.html
index 1471cdc..14410e9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,11 +3,6 @@
<head>
<title>Infantry Combat Solo Basic</title>
<link rel="stylesheet" href="assets/css/style.css">
- <script>
- const source = new EventSource('/esbuild');
- source.addEventListener('change', () => location.reload());
- // source.addEventListener('message', (e) => console.log(e));
- </script>
</head>
<body>
<template id="damage-block">
diff --git a/src/index.js b/src/index.js
index b562651..ee9cea9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,6 +7,12 @@ import { scenarios } from './modules/scenarios.js';
globalThis.svgns = 'http://www.w3.org/2000/svg';
+if (window.IS_DEV) {
+ const source = new EventSource('/esbuild');
+ source.addEventListener('change', () => location.reload());
+ // source.addEventListener('message', (e) => console.log(e));
+}
+
const mapPlaceholder = document.querySelector('.map-placeholder'),
distanceOutput = document.getElementById('status'),
proneToggle = document.getElementById('toggle-prone-counter'),
diff --git a/test/integration/setup.cjs b/test/integration/setup.cjs
index cc68a59..451e82d 100644
--- a/test/integration/setup.cjs
+++ b/test/integration/setup.cjs
@@ -2,7 +2,7 @@ console.log('\nSpawning server process...');
const { spawn } = require('child_process');
module.exports = async function (globalConfig, projectConfig) {
- const child = spawn('node', ['server.cjs']);
+ const child = spawn('node', ['esbuild-server.mjs']);
child.stdout.on('data', (data) => {
console.log(`${data}`);