Raddy Website Design & Development Tutorials

NodeJS Setup With Express, HTML, CSS, JS & EJS

By Raddy in NodeJs ·

In this article, we will have a look at how to set up a NodeJS Server, we will cover Express, how to add CSS, JS and Images to your project and finally, we will look at how to use EJS. If you wish, you can also check out the video that I made.

So let’s get started.

Create a project folder

Name your project folder. This is where your project is going to live and all packages will be installed. Talking about packages, let’s go to step to and create our server setup.

Setup Server – Package.json file

This file is usually in the project root and it’s called package.json. It holds various metadata relevant to the project and it’s used to give information to npm that allows identifying the project as well as handle dependencies.

Go to the root of the folder, open PowerShell or the Terminal if you are using a mac and type the following command.

npm init

As long as you have nodejs installed, this should guide you through the setup of your project. Once you finish with the installation, open your package.json file and just double check to see if everything is looking good.

Now let’s install some dependencies.

Install Dependencies

The dependencies we need to install to get started are Express and EJS.

Express is a web application framework for Node.js that is designed for building web applications and API’s.

EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. PUG is another good alternative that you can use.

So let’s install express and ejs together by running the following command:

npm install express ejs

Install Nodemon

Nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

To install nodemon simply do:

npm install nodemon --save-dev

Project Structure

Now let’s create the following folders and files, leaving node_modules, readme.md, package-lock and package-json as that should have been automatically generated by now.

πŸ“‚ node_modules
πŸ“‚ public
 πŸ“‚ css
  πŸ“œ main.css
 πŸ“‚ img
  πŸ–Ό cat.jpg
 πŸ“‚ js 
  πŸ“œ script.js
πŸ“‚ views
 🌍 about.ejs
 🌍 index.ejs
πŸ“œ README.md
🌍 app.js
πŸ“œ package-lock.json
πŸ“œ package-json

Run it

Before we run the project to see if everything is working as intended, we need to add some more metadata in our package.json file.

Open your package.json file and add the following under scripts

"start": "nodemon app.js"

Your full json file should look something like this:

  "name": "Learning NodeJS",
  "version": "1.0.0",
  "description": "NodeJS Tutorial",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app.js"
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.3",
    "express": "^4.17.1"
  "devDependencies": {
    "nodemon": "^2.0.4"

Save the file and now you should be able to run your project by simply doing:

npm start
npm start

We are getting close, but there are a few more things that we need to do before we are able to see our project. First, we need to add ‘express’ and select port number that NodeJs can listen on. Let’s do that.

In your app.js folder add the following code below and then run the project with “npm start”:

// Imports
const express = require('express')
const app = express()
const port = 5000

// Listen on Port 5000
app.listen(port, () => console.info(`App listening on port ${port}`))

Run your app, and see what happens. In PowerShell or Terminal (for Mac) you should see a message:

App listening on port 5000unless the port is already taken, then you can change it to 3000 or something like that.

Static Files

This will allow us to easily access our statics files such as css, js and images from our root folder of the project. Let’s have a look at how we can do that:

// Static Files

// Example for other olders
// app.use('/css', express.static(__dirname + 'public/css'))

Setting up our View’s & EJS

This does two things. It will help us set up our views folder, where our html files will live and also we need to set the view engine which in our case is the EJS.

// Set View's
app.set('views', './views');
app.set('view engine', 'ejs');

Rendering Pages

In this example, I will give you two options. One rendering the index.ejs file and one that simply grabs the about.html file.

// Navigation
app.get('', (req, res) => {
    res.render('index', { text: 'Hey' })

app.get('/about', (req, res) => {
   res.sendFile(__dirname + '/views/about.html')

Your final code for app.js should look something like this:

// Imports
const express = require('express')
const app = express()
const port = 5000

// Static Files
// Specific folder example
// app.use('/css', express.static(__dirname + 'public/css'))
// app.use('/js', express.static(__dirname + 'public/js'))
// app.use('/img', express.static(__dirname + 'public/images'))

// Set View's
app.set('views', './views');
app.set('view engine', 'ejs');

// Navigation
app.get('', (req, res) => {
    res.render('index', { text: 'Hey' })

app.get('/about', (req, res) => {
   res.sendFile(__dirname + '/views/about.html')

app.listen(port, () => console.info(`App listening on port ${port}`))

Example of EJS page

For our index.html let’s see how we can add our stylesheet and also some EJS code.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    Index baby
    <img src="img/cat.jpg" alt="cat">
    <h1><%= text %></h1>



Run the project by doing npm start and then open “localhost:5000” in your browser. If you want to visit the about page you should add a slash after the URL just like this “localhost:5000/about”

npm start

And that’s everything.

Credit: Cat image Photo by Ramiz Dedaković on Unsplash

More Resources:

  1. Muhammad hamza says:

    how to handle the js file which is in public folder

    1. Raddy says:

      You can include your js file in your HTML, in the head and start using it just like the styles (main.css)

      1. Epicrafter says:

        Like this “”?

        1. Raddy says:

          Yep, that’s it πŸ™‚

  2. Perfect that is what I am looking for

  3. Deb says:

    very helpful

    1. Raddy says:

      I am glad that you found it helpful, Deb!

    2. Mohd Shafiq says:

      Hey Raddy, I have watched you on your YouTube channel. That is nice.

      I have a problem whenever I show my static html page the css linked with it seems not to be css. When I open console and look the source i found there my css files; are converted into html.
      Please help me.

      1. Raddy says:

        Hey Mohd,

        Would you be able to send a screenshot so I can get a better understanding of what is going on.
        You need to make sure that the about.ejs and index.ejs end with EJS. I messed it up on the article (it’s now updated). The other thing that you can do is to double-check the path to the CSS.

      2. Raddy says:

        You can also download the code from GitHub and see if you have missed something. It could be a silly typo mistake.

  4. AlexSong says:

    Thanks for your great lesson~

    1. Raddy says:

      Happy to help! I am glad that you liked it.

  5. jossie urbano says:

    As I do instead of putting a background color, I put a background image, but it does not repeat.

    1. Raddy says:

      Did you add the “background-repeat” property to your CSS? Could add your background image to your body and do something like this:

      body {
      background-image: url("gorilla.gif");
      background-repeat: repeat;

  6. Rhodin Emma says:

    This was really helpful, thanks!

  7. Gurpal says:

    Hi Raddy, I want build version. like:


    “scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1″,
    “start”: “nodemon app.js”
    “build”: “anythig”

    1. Raddy says:

      Hey Gurpal,

      I am not sure if I understand your comment. Could you expand on it please and I will try to help

  8. Daniel Julie says:

    Hi Raddy,

    Any idea of how to connect or install nodeBB to a websit template?

    1. Raddy says:

      I’ve actually never heard of it. They do have an installation guide here if this helps: https://docs.nodebb.org/installing/os/

  9. chris says:

    Loved watching your video and how to use nodjs and ejs
    it help me out a lot

    1. Raddy says:

      Glad that you found it helpful!

  10. Nick says:

    Hi! Great article by the way! I would like to know if it is possible to connect multiple front-end pages (those that use only HTML+CSS+JS) to Node.js server, for instance:
    – main website page (main.html)
    – about page (about.html)
    – log in / sign up page (form.html)
    (plus CSS and JS files for all those pages)? I tried to split those files into three folders – main (main.html, main.css and main.js), about (about.html, about.css and about.js), form (form.html, form.css, form.js) and connect them to index.js file on my Node.js server, but it only displayed files in the first folder, while ignoring the others. I want to make it possible to navigate between pages in browser using β€œ/β€œ (as in your article). How could I do that?

    1. Raddy says:

      Hey Nick, I am glad that you like the article! You can do that in two steps. First define a static folder where you can easily access the HTML, CSS, JS. To keep it organised call it ‘views’.
      Inside your views, you will have your main, about & login folders.

      In app.js set the public folder of views

      Now create your routes so you can visit by doing / for homepage and /about.
      app.get("/", (req, res) => {
      res.sendFile(__dirname + "/views/main/main.html");

      app.get("/about", (req, res) => {
      res.sendFile(__dirname + "/views/about/about.html");

      Then for your HTML, you can link your CSS / JS like this (it won’t let me post HTML) soo:

      In your HTML head tag: href="/main/main.css"

      Note that you no longer have to specify ‘views’. Just put the folder where you want to grab the JS / CSS.
      The main problem that you will have is that you won’t be able to pass data to the HTML. This is why is best to use a templating engine like EJS, Handlebars or Pug. There are many options…
      Your other option is to separate your Front end from your back end. You can use NodeJs as an API and then fetch the data using JS in your HTML.

  11. Lokesh VC says:

    Hey Raddy, Article is Awesome!
    Its very helpful for me, really appreciate you.
    Keep sharing you experience for NodeJS Development & Solutions, Thanks You

    1. Raddy says:

      That’s good to hear, Lokesh! Thank you

  12. M Mathems says:

    Hi Raddy,

    Many thanks for this EJS tutorial you have produced and shared. It was simple to follow your examples and see the various results of code. What you helped me to discover has satisfied me that EJS and Express (if these are different) can meet the HTML needs of an application.

    Brilliant work!

    With thanks,

    M Mathems

    1. Raddy says:

      Thank you! I appreciate the comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.