Quick Start Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
6
Reading List
https://jackwhiting.co.uk/posts/lazy-loading-vanilla-js-with-webpack-laravel-mix
https://medium.com/free-code-camp/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b
Libraries
https://github.com/verlok/vanilla-lazyload
Developer Resources
https://webpack.js.org/configuration/output/
https://web.dev/articles/preload-critical-assets
Reading List
https://www.codemzy.com/blog/how-to-name-webpack-chunk
How to name a webpack chunk (including split and common chunks)
Reading List
Featured Post
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
Make Your Web App Installable
February 16, 2025How to make your web app installable.
true
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
project-setup
Featured Post
Sidebar Labels
https://vanillawebdev.blogspot.com/search/label/app-component
App Component
1
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
4
https://vanillawebdev.blogspot.com/search/label/data-server
Data Server
2
https://vanillawebdev.blogspot.com/search/label/layout
Layout
1
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/2025/01/vanilla-javascript-project-structure.html
https://vanillawebdev.blogspot.com/2025/01/index-comments.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2025/01/local-development-server-setup.html
Local Development Server using Express.js
January 24, 2025
2025
January
25
01:19 AM
A starter code to set up a local development server using express.js, for vanilla JavaScript project.
The following setup is suitable for when you want to:
host an application in the same port, e.g.
localhost:8000,host multiple versions of application, e.g. a development and production setup.
host the app in secure context (https).
Takeaway Code
The following setup will serve src folder on localhost:8000.
Directory structure:
/src
index.html
package.json
server.jspackage.json
{
"type": "module",
"devDependencies": {
"express": "^4.21.1"
}
}server.js
import express from 'express';
let servers = [
{ port: 8000, dir: 'src/', },
];
// Start servers
console.log('Servers running at:');
for (let server of servers) {
let {port, dir} = server;
let app = express();
app.use(express.static(dir));
app.listen(port, () => {
console.log(`${dir}: http://localhost:${port}/`);
});
}Running the Project
Install dependencies using pnpm:
pnpm iTo start the server, run:
node serverCustomization
Secure Context (HTTPS)
Refer to the following article:
In summary, you need to:
install
mkcert,generate certificate in you PC and distribute it on devices that want to access the secure context,
generate
.pemfiles in the project folder (also, ignore it in git), e.g:
mkcert localhost 192.168.1.90use the following
server.jssetup:
import express from 'express';
import https from 'https';
import fs from 'fs';
// Server configuration
let servers = [
{ port: 8207, dir: 'src/', isHttps: true },
// { port: 3000, dir: 'dist/', },
];
// Start servers
for (let server of servers) {
let { port, dir, isHttps, staticPath } = server;
let app = express();
app.use(express.static(dir));
if (isHttps) {
// HTTPS server (using same port)
const httpsOptions = {
key: fs.readFileSync('localhost+1-key.pem'), // Replace with the actual key file
cert: fs.readFileSync('localhost+1.pem'), // Replace with the actual cert file
};
const httpsServer = https.createServer(httpsOptions, app);
httpsServer.listen(port, () => {
// HTTPS on a different port to avoid conflict
console.log(`HTTPS server running at: https://localhost:${port}/`);
});
} else {
app.listen(port, () => {
console.log(`${dir}: http://localhost:${port}/`);
});
}
}
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
https://vanillawebdev.blogspot.com/2025/01/vanilla-javascript-project-structure.html
https://vanillawebdev.blogspot.com/2025/01/index-comments.html
https://vanillawebdev.blogspot.com/