ExpressJS is a popular Node.js web application framework that is used to build web applications and APIs quickly and easily. One common requirement in web applications is to have the same header and footer on all pages to provide a consistent look and feel to users. In this tutorial, I will show you how to achieve this in Express by creating a layout template that contains the header and footer, and using it in all your pages.
Step 1: Set up your Express project
Before we can add a common header and footer to all our pages, we need to set up our Express project. If you haven’t already done so, install Express by running the following command:
npm install expressNext, create a new Express project by running the following commands:
mkdir my-express-app
cd my-express-app
npm init -yThen, create a new file called app.js and add the following code to it to set up a basic Express server:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});You can start the Express server by running the following command:
node app.jsStep 2: Create the layout template
Now that we have set up our Express project, we can create the layout template that will contain the header and footer. Create a new folder called views in your project directory, and within this folder, create a new file called layout.hbs. HBS is a templating engine that allows us to create reusable templates in Express.
Add the following code to layout.hbs:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<header>
<h1>My Header</h1>
</header>
{{{ body }}}
<footer>
<p>My Footer © 2022</p>
</footer>
</body>
</html>In this template, we have a header section containing the text "My Header", a footer section containing the text "My Footer © 2022", and a placeholder {{{ body }}} where the content of each page will be inserted.
Step 3: Set up the Express app to use the layout template
Next, we need to configure our Express app to use the layout template for all our pages. Install the express-handlebars package by running the following command:
npm install express-handlebarsIn app.js, add the following code to configure Express to use the Handlebars templating engine and the layout template:
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
const port = 3000;
// Configure Express to use Handlebars
app.engine('hbs', exphbs({ extname: '.hbs' }));
app.set('view engine', 'hbs');
// Define a route for the home page
app.get('/', (req, res) => {
res.render('index');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});Step 4: Create your pages
Now that we have set up our layout template and configured Express to use it, we can create our pages. Create a new file called index.hbs in the views folder and add the following code to it:
<h2>Welcome to my website</h2>
<p>This is the home page content</p>This file will represent the home page of our website. You can create additional pages by creating more .hbs files in the views folder.
Step 5: Test your app
You can now restart your Express server by running node app.js and open a web browser to http://localhost:3000 to see your home page with the header and footer. If you create additional pages, you can navigate to them by adding routes and corresponding .hbs files.
With this setup, you now have a common header and footer on all pages of your Express application, providing a consistent look and feel to your users. You can customize the header and footer by editing the layout.hbs file, and you can create additional templates for different sections of your website if needed. Express and Handlebars make it easy to create reusable layouts and templates, saving you time and effort in developing your web application.
