express-handlebars template not loading CSS styling on static routes

Question

I have a set of different routes all using the same template main, but any route is only one / away from the base route applies the CSS but anything beyond that will not include it.

So app.get('/profile) will render with the CSS, but app.get('/profile/edit') does not.

I am unsure as to why this is not working, as far as I understand this line should apply to all routes set below it.

In server.js

  app.use(express.static(__dirname + "/public"));
  //Many different routes
  //...
  //...

    //renders with CSS successfully
    app.get("/profile", (req,res) => {
      res.render('profile', {
        layout: "main",
        cause: {
          title: title
        },
        csrfToken: req.csrfToken
      });
    });

 //this is the route that renders without CSS
    app.get("/profile/edit", (req,res) => {
      res.render('edit', {
        navItems: [
          {name: 'See your fellow supporters',
          link: "/signatures"}
        ],
        layout: "main",
        cause: '',
        csrfToken: req.csrfToken
      });
    });

Handlebars templates

   //edit.handlebars
    <h2>Change your details</h2>
    <form method="POST">
    <input type="text" name="firstName" placeholder="first name">
    <label for="firstName">First Name</label>

    <input type="text" name="lastName" placeholder="last name">
    <label for="lastName">Last Name</label>

    <input type="email" name="email" placeholder="e-mail">
    <label for="email">E-mail</label>

    <input type="password" name="password" placeholder="password">
    <label for="password">Password</label>

    <input type="text" name="age" placeholder="age">
    <label for="age">Age</label>

    <input type="text" name="city" placeholder="city/town">
    <label for="city">City or Town</label>

    <input type="text" name="homepage" placeholder="homepage or social media">
    <label for="homepage">Homepage</label>

    <input type="hidden" name="_csrf" value="{{csrfToken}}">
    <input  id="formButton" type="submit" name="submit" value="Update">
  </form>


//profile.handlebars
          <h2>Let people know that you support: {{>cause}}</h2>
      <form method="POST">
        <input type="text" name="age" placeholder="age">
        <input type="text" name="city" placeholder="city/town">
        <input type="text" name="homepage" placeholder="homepage or social media">
        <input type="hidden" name="_csrf" value="{{csrfToken}}"
        <input  id="formButton" type="submit" name="submit" value="continue">
      </form>

david · Accepted Answer · 2020-01-13 15:06:23Z

2

make sure that in main.handlebars, style.css is linked like follows:

href="/css/styles.css"

and not

href="css/styles.css"

answered Jan 13, 2020 at 15:06

david

437 bronze badges

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

Comments

Lajne · Accepted Answer · 2019-03-06 15:54:26Z

0

In server.js you can use:

app.engine('hbs', expressHandlebars({
 defaultLayout: 'main',
 extname: '.hbs',
 layoutsDir: path.join(__dirname, 'layouts')
}))

That would require you to have your main.hbs in the layouts-folder.

That should fix your problem.

answered Mar 6, 2019 at 15:54

Lajne

822 silver badges11 bronze badges

Collectives™ on Stack Overflow

express-handlebars template not loading CSS styling on static routes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related