On my second html page model.html, I noticed the following issue: When I include a '/' at the end of my route address in the browser like this: http://localhost:3002/home/model/, the correct html page is loaded, but the css/js files do not load.
However, if I omit the '/' at the end of the route address like this: http://localhost:3002/home/model, the correct html page loads along with the css/js files.
Without the '/' at the end, the css/js files successfully load from statics/css/style.css and js/dynamicData.js.
Interestingly, when the '/' is included at the end, I can use ../statics/css/style.css to load the css file and "../js/chartData.js" to load the js file - but then the version without the '/' fails to load the css/js files.
My folder structure:
js - contains other javascript files
node_modules
statics
css - holds style.css
image - includes images
index.html
model.html
index.js - initializes express server
pc_server.js - express server setup
Express code snippet (pc_server.js)
Middleware configuration:
process.chdir(__dirname);
// base = '/home'
app.use(base, express.static(__dirname));
Defined Routes:
const INDEX_PAGE = '/';
const MODEL_PAGE = '/home/model';
function setupRoutes(app) {
const BASE = app.locals.base;
app.get(INDEX_PAGE, redirectHome(app));
// BASE = '/home'
app.get(BASE, toHomePage(app));
app.get(MODEL_PAGE, toModelPage(app));
Functions for the routes:
function redirectHome(app) {
return errorWrap(async function(req, res) {
try {
res.redirect(app.locals.base);
}
catch (err) {
console.error(err);
}
});
}
function toHomePage(app) {
return errorWrap(async function(req, res) {
try {
res.sendFile(path.join(__dirname+'/statics/index.html'));
}
catch (err) {
console.error(err);
}
});
}
function toModelPage(app) {
return errorWrap(async function(req, res) {
try {
res.sendFile(path.join(__dirname+'/statics/model.html'));
}
catch (err) {
console.error(err);
}
});
}
The aim is to ensure that the same page loads properly with css/js regardless of whether the route address includes a trailing '/' like http://localhost:3002/home/model/ or not like http://localhost:3002/home/model
Additional question: Why is it that when I type http://localhost:3002/home, my browser automatically adds a trailing '/' making it http://localhost:3002/home/?