Express server loads html page with/without css/js when last route character is without/with '/', respectively

Question

The following is affecting my second html page model.html: If my route address is with a '/ at the end (typed on browser addr field) like so: http://localhost:3002/home/model/ then the correct html page is loaded, but no css/js is loaded.

If my route address is without a '/ at the end like so: http://localhost:3002/home/model then the correct html page is loaded, and css/js is loaded.

Without '/' at the end, css/js loads fine using statics/css/style.css and js/dynamicData.js

The weird part is that when '/' is at the end, I can use ../statics/css/style.css to load the css and "../js/chartData.js" to load js - but that means the one without '/' now longer loads the css/js.

My folder structure:
    js - has other js scripts
    node_modules
    statics
      css - has style.css
      image - has images
      index.html
      model.html
    index.js - init express server
    pc_server.js - express server

Express code (pc_server.js)

Middleware setup?:

process.chdir(__dirname);
// base = '/home'
app.use(base, express.static(__dirname));

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));

Routes functions defined:

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 goal is to load the same page with css/js with either http://localhost:3002/home/model/ or http://localhost:3002/home/model

Additional: Why is it that when I type http://localhost:3002/home I get http://localhost:3002/home/ automatically on my browser addr field?

when opening developers console (f12), it shows 404 errors for 'localhost:3002/home/model/css/style.css'? — noam gaash
– noam gaash, Commented Mar 30, 2019 at 18:11
Refused to apply style from 'localhost:3002/home/model/statics/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. GET localhost:3002/home/model/statics/image/logo.png 404 (Not Found) 2localhost/:27 GET localhost:3002/home/model/js/chartData.js net::ERR_ABORTED 404 (Not Found) — rated2016
– rated2016, Commented Mar 30, 2019 at 18:26

noam gaash · Accepted Answer · 2019-03-30 19:24:56Z

1

the problem

it probably occurs due to relative links in your site.

when home/model is used - relative css/style.css link will lead to home/css/style.css
when home/model/ is used, the same link will lead to home/model/css/style.css

the solution:

the easiest way to solve it is changing your link tag to:

<link rel="stylesheet" type="text/css" href="../../home/statics/css/style.css">

this link goes to the root address, and then enters your path Independently from the user's path.

why it's working?

the ../../ prefix tell the browser to go two levels up.

the browser consider the "home/model/" as a visit inside a model folder inside home folder. two levels upward lead the browser to the root level, where it has a clean start. when the user visits "home/model", it considered as a file inside the home folder. one level upward is the root level, and the second ../ does nothing.

after achieving the root level - the browser entering "home/statics/css/style.css" and find the right file in both cases :)

edited Mar 30, 2019 at 19:24

answered Mar 30, 2019 at 18:23

noam gaash

3512 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

rated2016 Over a year ago

Looked at the dev console when on /home/model/ page and I see it's trying to get files via localhost:3002/home/model/statics/css/style.css. I don't have a model dir where dirs like statics and js exist. So I created a model dir and copied the js and statics folder into it - this seems to work (all css/js files load). But, it's such a wacky solution, any cleaner solution?

noam gaash Over a year ago

have you tried to change the link tag inside the html script?

rated2016 Over a year ago

Yes, I tried your suggested href but the css does not loads for either case. It seems that with no '/', the address it starts looking for statics/css/styel.css is /home/ but with '/' it starts looking with /home/model/

noam gaash Over a year ago

maybe try ../../home/statics/css/style.css, to go two levels up before entering the back to the home folder

rated2016 Over a year ago

YES, that really did the trick. Thanks so much! Explanation as to why this works?

|

Collectives™ on Stack Overflow

Express server loads html page with/without css/js when last route character is without/with '/', respectively

1 Answer 1

the problem

the solution:

why it's working?

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

the problem

the solution:

why it's working?

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related