NodeJS Setup With Express, HTML, CSS, JS & EJS
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 initAs 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 startnpm 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 5000 – unless 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
app.use(express.static('public'));
// 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
app.use(express.static('public'));
// 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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
Index baby
<img src="img/cat.jpg" alt="cat">
<h1><%= text %></h1>
</body>
</html>Final
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:
Author
Hi! Iβm Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
how to handle the js file which is in public folder
You can include your js file in your HTML, in the head and start using it just like the styles (main.css)
Like this “”?
Yep, that’s it π
Perfect that is what I am looking for
very helpful
I am glad that you found it helpful, Deb!
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.
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.
You can also download the code from GitHub and see if you have missed something. It could be a silly typo mistake.
Thanks for your great lesson~
Happy to help! I am glad that you liked it.
As I do instead of putting a background color, I put a background image, but it does not repeat.
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;
}
This was really helpful, thanks!
Thank you!
Hi Raddy, I want build version. like:
index.html
about.html
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“start”: “nodemon app.js”
“build”: “anythig”
},
Hey Gurpal,
I am not sure if I understand your comment. Could you expand on it please and I will try to help
Hi Raddy,
Any idea of how to connect or install nodeBB to a websit template?
I’ve actually never heard of it. They do have an installation guide here if this helps: https://docs.nodebb.org/installing/os/
Loved watching your video and how to use nodjs and ejs
it help me out a lot
Glad that you found it helpful!
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?
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
app.use(express.static('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.
Hey Raddy, Article is Awesome!
Its very helpful for me, really appreciate you.
Keep sharing you experience for NodeJS Development & Solutions, Thanks You
That’s good to hear, Lokesh! Thank you
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
Thank you! I appreciate the comment