Start a web server with Node.JS and Express

kavinvalli

Kavin Desi Valli

Posted on March 5, 2022

Start a web server with Node.JS and Express

Node.JS and Express are two of the most used technologies in the web development world right now. It powers some big sites like Paypal, Wall Street Journal, Shutterstock and a lot more.

Getting started with Node.JS and Express is very easy.

Requirements

  • You should have Node.JS installed for this tutorial. If not, visit https://nodejs.org/en/ and download the LTS Version. This will also install npm which is a widely used package manager for Node.JS.
  • You're also expected to have a basic knowledge of Javascript and Node.JS.

Creating a project

First, let's start off with creating a Node.JS project/directory. You can run the following two commands on the the terminal. Alternatively, you can create a folder from your file manager and open it in VS Code or any other code editor of your choice.

mkdir node-express-tutorial
cd node-express-tutorial
code . # for Visual Studio Code users

Enter fullscreen mode Exit fullscreen mode

Screenshot 2022-03-03 at 09.23.16.png

Configuring the folder to use npm

Run the following in the terminal.

npm init

Enter fullscreen mode Exit fullscreen mode

You will be prompted with a few questions. You can press enter through most of them.

Alternatively, you can run npm init -y if you want to skip through all the questions with the default value.

npminit.gif

Starting with the coding part

So, start with creating a file named index.js. You can name it anything, just make sure you end it with .js.

Conventionally, the file is named index.js, server.js or app.js.

Installing express

Like most NodeJS packages, you can install express using npm. Run:

npm install express

Enter fullscreen mode Exit fullscreen mode

npmiexpress.gif

This will add express as a dependency in your package.json and also install it in your node_modules folder.

Screenshot 2022-03-03 at 09.28.32.png

Using express

In your index.js file, write the following:

const express = require("express")

Enter fullscreen mode Exit fullscreen mode

If you've used Node.JS before, this should look familiar. This line basically imports the express package. Now, to use express, you need to instantiate the imported function. So:

const express = require("express")
const app = express() // add this line

Enter fullscreen mode Exit fullscreen mode

Now, you can use the app variable to start the server like so:

app.listen(3000, () => {
    console.log(`πŸš€ Server started on port 3000`)
}

Enter fullscreen mode Exit fullscreen mode

You've basically already created a web server. You can run the app by running

node index.js

Enter fullscreen mode Exit fullscreen mode

nodeindex.js.gif

If you get something like in the above gif, you're good to go to the next step!

Routes

So now, we've started an express server but it doesn't know what it has to do when we're visiting the / route. Hence we get the error:

Screenshot 2022-03-03 at 09.54.40.png

For this, add the following line of code before calling the app.listen function:

app.get('/', (req, res) => {
    return res.send("Hello, World")
})

Enter fullscreen mode Exit fullscreen mode

Let's go through this code:

  1. We call the app.get function. This takes in two parameters:
    1. A route: The route on which you want to run this function. In this case we're using the / route.
    2. A callback function: The second parameter is a callback function with the request and response parameters which express provides us with. The res(response) gives us a send function with which we can send back a text response to the browser.

Now, we need to restart the NodeJS server running. Go to the terminal where you had run node index.js and then hit Control-C. And then restart by typing node index.js again like so:

restartnodejsserver.gif

BONUS: Restarting the node server repeatedly becomes very annoying. To deal with this, there's a package called nodemon which you can install and setup. For detailed instructions visit: https://livecode247.com/how-to-add-auto-reload-to-your-node-js-app

Now, refresh the page on the browser and you should see this:

Screenshot 2022-03-03 at 10.08.38.png

For the final step, you can refactor the port number like this

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`πŸš€ Server started on port ${port}`);
});

Enter fullscreen mode Exit fullscreen mode

process.env.PORT returns the PORT environment variable which is set in many hosting providers so it is a good practice to use that instead of hardcoding a port. We're saying that if it doesn't exist, use port 3000.

Final Code

Your final code in index.js should look like this:

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  return res.send("Hello, World");
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`πŸš€ Server started on port ${port}`);
});

Enter fullscreen mode Exit fullscreen mode

That's it for this tutorial! Now express has a lot more stuff to offer you. Just yesterday, MDN released it's new website and I found a very good in-depth tutorial on express. Do check it out here.

πŸ’– πŸ’ͺ πŸ™… 🚩
kavinvalli
Kavin Desi Valli

Posted on March 5, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related