CODEWITHSUNDEEP
javascriptnode.jsexpresshandlebars.js
peterHasemann
peterHasemann

Reputation: 1580

Setting up the directory management in Express Handlebars

I use NodeJs, Express and Handlebars.

My server file app.js

const express = require('express');
const exphbs  = require('express-handlebars');

const app = express();

app.engine('handlebars', exphbs({defaultLayout: 'index'}));
app.set('view engine', 'handlebars');

app.get('/start', function (req, res) {
  res.render('start'); // render the "start" template
});

app.listen(8888, function () {
  console.log('Server running on port 8888');
});

So when passing in the route localhost:8888/start there should be my index.handlebars

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Foo</title>
</head>

<link href="../../CSS/requirements.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<body>

  <p>TEST - This is on all pages</p>

{{{body}}}

</body>
</html>

and the template to load (start.handlebars)

<script src="../Client/start.js"></script>

<p>Template 1 is active</p>

My directory structure

Directory

When running the server, my route is loading fine but the problem is, that the browser is not able to find the script and css files.

Browser

I checked my paths but I think they might be correct. Am I wrong?

Upvotes: 1

Views: 1072

Answers (1)

Vipin Kumar
Vipin Kumar

Reputation: 6546

You have to set static folder in your express app. Add following middleware

app.use(express.static(path.join(__dirname, 'public')));

right after

app.set('view engine', 'handlebars');

Create a public folder at your root level and move your Client and CSS folder in that public folder.

Ref: Link

Upvotes: 1

Related Questions