0

I am building a back-end for my web page, with file structure like this:

public
  css
    main.css
    main_b.css
  index.hbs
  index_b.hbs
server
  server.js

Styling sheets are referenced in index files by link attributes containing:

rel="stylesheet" type="text/css" href="main.css"

rel="stylesheet" type="text/css" href="main_b.css"

Here is my server.js :

const path = require('path');
const fs = require('fs');

const express = require('express');

const app = express();

const hbs = require('hbs');
    
hbs.registerPartials(path.join(__dirname, '../public/partials'));
app.set('view engine', 'hbs');

app.use(express.static(path.join(__dirname, '../public/css')));
    
// activity logger 
app.use((req, res, next) => {
  const now = new Date().toString();
  const logEntry = `${now}: ${req.headers.host} ${req.method}${req.url}`;
  fs.appendFile(path.join(__dirname, '../server/server.log'), logEntry.concat('\n'), (error) => {
    if (error) {
      console.log(error);
    }
  });
  process.env.route = req.path;
  next();
});

app.get('*', (req, res) => {
  switch (process.env.route) {
    case '/': // home page
      res.render('../public/index.hbs');
      break;
    case '/b': // basic layout 
      res.render('../public/index_b.hbs');
      break;
    
    default: // unknown routes
      res.render('../public/index.hbs');
  }
});

app.listen(3000);

On requesting localhost:3000, log entry is ok:

Thu Jan 24 2019 07:57:08 GMT+0200 (Eastern European Standard Time): localhost:3000 GET/

On requesting localhost:3000/abc, log entry is also ok:

Thu Jan 24 2019 07:57:08 GMT+0200 (Eastern European Standard Time): localhost:3000 GET/abc

And the problem shows on testing requests with sub-routes like localhost:3000/abc/def, css doesn't render and the log entry is :

Thu Jan 24 2019 08:04:55 GMT+0200 (Eastern European Standard Time): localhost:3000 GET/abc/def Thu Jan 24 2019 08:04:56 GMT+0200 (Eastern European Standard Time): localhost:3000 GET/abc/teamk-reset.css Thu Jan 24 2019 08:04:56 GMT+0200 (Eastern European Standard Time): localhost:3000 GET/abc/main.css

I saw that part of the route is used to amend the css lookup path, and tried to solve the problem by index and redirect properties of the options object in Express.static(), but no success.

Would be glad to receive some directions/ reference, otherwise probably I should refactor my route querying approach.

1 Answer 1

0

I found the issue with my code,

Styling sheets should be referenced in index files by link attributes containing:

rel="stylesheet" type="text/css" href="/main.css"

rel="stylesheet" type="text/css" href="/main_b.css"

, their names prepended with '/' for correct lookup URL construction.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.