Build a Hello World Website and Web Server with EJS, Node and Express

How to make your first EJS project

by Alexandra Kropova from Mammoth Interactive

Below are the steps to start templating with EJS, embedded JavaScript templates. Learn this essential language that every web developer must know.

Make a new Node.js project at Repl.com.

If you’re not using Repl.com, skip this step. You can use your computer’s built-in Terminal or Command Line application and a code editor.

What is Repl

You don’t have to use Repl. Repl makes it easier to use a terminal, code editor and server all at once in the browser. It’s free to make an account and use many programming languages.

Make a new project folder.

mkdir hello-ejs

Enter the folder

cd hello-ejs

Set up the npm project.

npm init -y

Install Express to help with making a server.

npm install express

Install EJS for templating.

npm install ejs

Build a server file in the project folder.

touch server.js (on Unix, Repl, Mac or Linux terminal)
copy con server.js (if using DOS Windows terminal)

Open the file in your online code editor or installed code editor. The file is empty by default. Set up the server file with the following code in the file.

var express = require('express');
var app = express();

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

app.get('/', function(req, res) {
res.render('pages/home');
});

app.listen(8080);

Next, you have to make the page that is the response to the request of the user going to yourwebsite.com/ (the homepage). You must create the page you want to display as the homepage.
EJS expects a views folder to hold your pages (EJS views) and partials (reusable page sections.)

Build a views folder in your project folder.

mkdir views

Enter the folder.

cd views

Make a sub-folder to store your pages.

mkdir pages

Enter the folder.

cd pages

Make an EJS file to store the homepage.

touch home.ejs
copy con home.ejs (DOS Windows command line)

Open the file. Put in some code for the content of the homepage.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<header>
<%- include('../partials/header'); %>
</header>

</body>
</html>

Notice here we referenced an EJS partial. We must make that partial.

Go a parent folder higher in the hierarchy.

cd ..

You should now be in the views folder. There, create a new folder to store your partials.

mkdir partials

Create a new file for your first partial.

It must be called ‘header’ because that is how we’ve already referenced it.

touch header.ejs
copy con header.ejs (if using Windows DOS command line)

Put some content into the file. The content should be header elements that you want to potentially reuse on multiple pages. For example:

<h2>This is a reusable header partial</h2>

Go up to your project folder.

cd ..

cd ..

You should now be in hello-ejs.

Run the server with:

node server.js

Open the local host at port 8080 to see your website. You will see the partial appear on your homepage. You can reuse this partial on any page of the site.

Want to learn more? Learn cryptocurrency, blockchains, algorithmic trading, financial analysis, algorithmic trading, the stock market, and more in The Complete Python for Finance: Learn to Trade in 99 Days.

Mammoth Interactive Favicon

Why you NEED to take this course :

Get in Touch.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

EMAIL US

support@mammothinteractive.com