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.