How to use express ejs layouts
Hi hoping that you are well today, our main focus is on how to use express ejs layouts in building a default nodejs website template.
We are going to build a website with three pages with ejs as our default templating language
In this article here we built a complete MERN stack application with REACT as our default front end library
But today we are not going to use any front end library but instead we are going to use a express templating language for the front end that is ejs
Templating engines are used to split elements in web page into multiple components like: footer, header, head, layout etc.
So there is no need to rewrite those elements for other pages and that way your application can scale easily.
now lets define some of the terms we are going to use in this article.
Is a nodeJS framework that makes the writing of nodeJS simpler and easier
In this part we are going to install the dependencies that are going to be used in this project
we are going to use
Now open the terminal and make a new directory then initialize your project as shown
ian@IanoTech:~/Documents/NODE$ mkdir ejsweb
ian@IanoTech:~/Documents/NODE$ cd ejsweb
ian@IanoTech:~/Documents/NODE/ejsweb$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (ejsweb)
entry point: (index.js)
About to write to /home/ian/Documents/NODE/ejsweb/package.json:
"test": "echo \"Error: no test specified\" && exit 1"
Is this OK? (yes)
Now what we’ve done here, we have made a directory named ejsweb then initialized our node project using npm init
To install our dependencies go to the terminal and type the following
npm i express ejs express-ejs-layout
Project set up
In this section we are going to set up our project
we are going to create some files and directories inside our project folder
Now in your project terminal create the following files and directories
In the codes above i have imported the modules required for the project
Created our default home page route
Our app is going to run on port 8000
after that run the command below in the terminal type node server.js
lets set up our layout file
Setting up the layout and header,footer and home page
in the layout.js file add the html structure below
We are going to use bootstrap in our project so don’t be shocked with the cdn link
In the file structure above we are going to include the header.js file and footer.js file and then body of the application will come in between
The body is the contents in the about,contact or any other page.
In our application there will be no need to rewrite our header and footer files since the layout file has got everything covered for us
Now let add our html files to the header and the footer
Now break the terminal by pressing ctrl + C then re-run it again using node server.js
refresh your browser and then try navigating to the respective contact and about page
Job well done we have set up our website template using express ejs layouts
Keep on practicing and add additional pages
Thanks for making it up to this point