Tech Chef's Blog

This post is about getting started with NodeJS, using Express as our backend and Embedded JavaScript (EJS) as our templating engine.

Installing Node

The very first step we need to is to install Node. Node can be found on the link below –

Install Node

Code Editor

Next tool we would need is a code editor. Visual studio code is a very popular code editor tool with lots of extension options and is platform independent. You can install and use it any operating system.

It can be downloaded from like here.

Once Node and code editor is installed, we start with creating the project.

Creating project

Creating folder

Open node.js command prompt and execute following command and hit enter,

md QuotesApp

go inside the folder –

cd QuotesApp

I am using windows operating system so above commands would work on windows. If you are using some other operating system then please execute commands accordingly.

Creating directory can be done using your computer also instead of doing from command prompt.

Create package.json file

Once you are inside QuoteApp directory, through node command prompt execute the following command –

npm init --yes

Above command would create package.json file in the folder.

Installing packages – Express and EJS

Execute the following commands to install Express and EJS –

npm i express

npm i EJS

Also we would be using Nodemon as dev dependency. Execute the following command –

npm install -D nodemon

-D option in above command specifies a package a dev dependency.

Updating script tag in package.json

Initial script tag has only one entry and that is “test”.

In order to compile our project we would adding 2 more entries in the script tag –

“start”: “node ./src/app.js”

Above entry would compile app.js file, which would be our main entry file of the application. app.js would be in the src folder. In package.json we have to mention app.js in the main tag –

“main”: “app.js”

We haven’t created app.js file yet but we would creating it soon. Also to run command, we would be executing it as show below –

npm start

To use nodemon, we would be adding another entry to the script tag –

“dev”: “nodemon ./src/app.js”

Main benefit of using nodemon is that we need not restart our node application whenever we make changes to files or directory in the project.

Till now our package.json should look like this –

Folder structure

Our final folder structure would look like below and i would be explaining purpose of each folder –

src folder

Most of the project related files would be residing under src folder.

data folder

This folder contains our quotes datasource in the form of json file.

public folder

This folder consists of all static resources of the application like css, js, images etc.

views folder

This folder will contain all EJS view files. EJS files ends with an extension of .ejs

Since our package.json and folder structure is complete, let us go head and code our main entry file app.js.

app.js

First thing we need to do is import primary packages into the file –

fs packge would be used for dealing with file system like reading and writing files etc on the server and path package provides helpful functions to combine file paths.

Next is to instantiate express, start server on port 3000 and listen to incoming requests –

Port is read from environment variables and if not found then takes 3000 as default value.

Registering public folder

We need to tell express which folder to use as public folder, we do that mentioning the path –

Registering EJS

Next is let express know where would EJS views be located and which engine to use –

__dirname will contain directory name where app.js resides.

Reading quotes

Registering route

When a request comes from the user for the index/home page, we need to render the page –

res.render will render index.ejs template from the views directory.

There are 2 parameters passed in the method – One is title of the page and another is the quotes collection.

So the index.ejs should make use of the 2 parameters passed and render content based on the template defined.

EJS

We can render dynamic content in EJS template by using <%%> and <%=%> syntax.

If we need to write javascript code in the template then we can use <%%> tags and write them inside it.

For example – for loop.

If we need to display value of any variable then we can use <%=%> tags.

I highly encourage you to checkout documentation of EJS for detailed coverage of all functionality provided.

In our index.ejs we will be using 2 parameters as show below –

Final output

Once everything is setup and run “npm run dev”. Hit http://localhost:3000 in the browser to see below output –

You can download the project for reference from the github library here.

Thank you all for spending your precious time in reading my blog, take care of your health and have a great year ahead.

Cheers!

You can refer to SPFx getting started if you are interested here.