express logo

How to build a simple Express Server: Part 1

What is Express? Express is a framework that helps remove repetitiveness from node.js to create a server backend for our web applications and APIs. Today we’re going to create an Express server!

Set Up

Let’s create a new folder called my-express-server. Now open your terminal and cd into this folder.

cd desktop/my-express-server

Note: desktop may be documents or wherever you put your folder.

In the terminal, we need to create a new file called “server.js”, so while cd’d into your folder type

touch server.js

Great, there’s now a server.js file in your folder. Now let’s initialize npm. We are assuming you already have node installed. If not you can download it here.

npm init

You are going to be asked a few questions in the terminal. You can press Enter and skip them all or answer them if you want. It should look like this below.

package name: (my-express-server)
version: (1.0.0)
description: <optional to describe your project>
entry point: (server.js)
test command: <optional>
git repository <optional>
keywords: <optional>
author: <optional to add your name>
license: (ISC)

After you hit Enter on “license”, it will show you a recap of what will be added to your package.json. If it all looks good, hit Enter again on “Is this OK? (yes)”.

If you look in your my-express-server folder now, you will see a server.js and a package.json file.

This is the process you will go through every time you start a new project.

Now let’s install Express.

Make sure you’re cd’d into your folder in the terminal still.

npm install express

You will see a node_modules folder appear in your my-express-server folder where it contains all the modules needed for Express as well as Express itself.

Now open your my-express-server folder in your desired code editor. My preference is Visual Studio Code, but feel free to choose Atom, Sublime, Vim, or whatever you desire.

Let’s make sure Express saved itself. Check your package.json and at the bottom under “license” you should see:

"dependencies":{
    "express": "^4.17.1"
}

Note: 4.17.1 may be different depending on when you read this, but that is simply the version number at the time this was written.

If you don’t see this dependency, add it manually. Make sure your version number is correct.

Create the Express Server

Now that we’re all set up, it’s time to code!

Skip to full code at the bottom here.

First we need to “require” Express. Open your server.js file and type this.

//jshint esversion:6

const express = require("express);

Note: jshint tells your editor that you are using ES6 and without this, it will show errors that don’t really exist.

Next we’ll create a constant called app which is a function that represents the Express module. It can be called anything you like, but app is best practice.

const app = express

Now let’s use one of app’s methods called listen. This tells the app to listen on a specific port, like tuning into a tv channel, for any requests that gets sent. In this case, we want that port to be 3000.

app.listen(3000);

We now have the bare bones of a working server. But if in your terminal while cd’d into the folder, you type node server.js, you’ll notice nothing happens. Or at least it looks that way. Hit control + c to exit out of that.

Let’s add something so that we can visually see that our server is running. To do that, we’re going to add a callback function to the port.

app.listen(3000, function(){
   console.log("Server started on port 3000.");
});

Save that and let’s go back to the terminal and retry node server.js. You should see the below pop up in your terminal now.

Server started on port 3000.

Congratulations! You now have a visibly working server on your computer.

Full code

//jshint esversion:6

const express = require("express");

const app = express();

app.listen(3000, function(){
    console.log("Server started on port 3000.");
});

To learn about getting your server to work with the browser and show on the frontend, read this article here about requests and reponses.

Hopefully this has helped someone to become 1 step closer to becoming a better developer.

Leave a Reply