Express.js + EJS complete solution

Mar 02, 202110 min read #nodejs#programming

People who have less time to invest and are familiar with the Handlebar template engine can quickly set up their website.

Let’s directly jump to work!

Prerequisites

Project structure

# setup project structure

app
|-- public
- styles.css
|-- views
- index.ejs
-- components
- header.ejs
- footer.ejs
|- app.js
|- data.json

Once you create the above file/folder structure we will start configuring our server by installing node modules.

NPM scripts

# initialize npm (please follow the steps)
$ npm init

After executing the above command you will see the package.json file inside the root directory of your project in your case app/package.json.

Now we can start installing our node modules.

$ npm i ejs express

After you install the above two modules, your package.json file should look like this.

/* package.json */

{
"name": "expressjs-ejs-project",
"version": "0.0.1",
"description": "",
"main": "app.js",
"scripts": {
"start": "node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"ejs": "^3.1.6",
"express": "^4.17.1"
}
}

Server setup

/* app.js */

const express = require("express");
const server = express();
const data = require("./data.json");

const PORT = process.env.PORT || 3000;

server.set("view engine", "ejs");
server.use(express.static(__dirname + "/public"));

server.get("/", (req, res) => {
res.render("index", { data: { nav: data.nav, page: data.pages.index } });
});

server.get("/contact", (req, res) => {
res.render("index", { data: { nav: data.nav, page: data.pages.contact } });
});

server.get("/about", (req, res) => {
res.render("index", { data: { nav: data.nav, page: data.pages.about } });
});

server.listen(PORT, () => {
console.log(`Sever is started on ${PORT}`);
});
/* data.json */

{
"nav": [
{
"label": "Home",
"url": "/"
},
{
"label": "Contact",
"url": "/contact"
},
{
"label": "About",
"url": "/about"
}
],
"pages": {
"index": {
"title": "Welcome to my website",
"details": "Dummy text: Its function as a filler or as a tool for comparing the visual impression of different typefaces"
},
"contact": {
"title": "Welcome to my website | Contact",
"details": "The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century."
},
"about": {
"title": "Welcome to my website | About",
"details": "One disadvantage of Lorum Ipsum is that in Latin certain letters appear more frequently than others - which creates a distinct visual impression."
}
}
}
<!-- views/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%=data.page.title%></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
<%- include("components/header"); %>
<main>
<h1><%=data.page.title%></h1>
<p><%=data.page.details%></p>
</main>
<%- include("components/footer"); %>
</body>
</html>
<!-- views/conponents/header.ejs -->

<header>
<ul>
<% data.nav.forEach((item)=> { %>
<li><a href="<%= item.url %>"> <%= item.label %> </a></li>
<% }) %>
</ul>
</header>
<!-- views/conponents/footer.ejs -->

<footer>
<p>Made with ❤️ and ExpressJS and EJS</p>
</footer>
/* public/css/style.css */

body {
margin: 0 auto;
padding: 2rem;
}

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

ul li {
display: inline-block;
padding: 0.3rem;
}

header,
footer
{
display: flex;
align-items: center;
height: 10rem;
}

footer p {
width: 100%;
text-align: center;
}

Run your application

After doing all the above stuff, it’s time to run your website on the local machine.

$ npm start

After running the above command you will see you’re server has been started on the 3000 port and accessible through http://localhost:3000/

Wish you all the best, in case you have any question feel free to drop them below or use my contact page.

Edit post
← Previous

My first Strapi project experience

Next →

Node.js Login Service (express.js + passport)