Getting Started With Node JS & Express

You’ve heard all about it, now it’s time to get your hands dirty and use it for the first time. Whether your a seasoned front-end engineer or you’ve never even written a hello program, this tutorial is going to walk you through setting up your first Node.JS app!

Congrats on taking the first steps to learning Node!

I won’t spend to much time explaining what Node itself is, there are many excellent articles already out there explaining the nitty-gritty details that you can check out. As a general overview, Node JS is a JavaScript run time that allows us to use JavaScript to write code for our web server.

The first thing you want to do is download Node here, go through all the download steps and it going to install both Node JS the actual run time, as well as NPM which stands for Node Package Manager. Don’t worry about that too much, for now, all you need to know is that it’s going to handle all of our project dependencies for us to simplify our workflow.

If you’ve properly downloaded Node, open a command prompt window and type the following commands

mkdir myApp
cd myApp
npm init -y

What we have done here is create a new directory called myApp, changed into that directory, and created our package.json file. Now we’re going to download express, which is a JavaScript library used for creating web servers. Then we're going to create our main server file by typing the following commands:

npm install --save express
touch server.js

After express has downloaded, if you open package.json in your IDE, you should now see express installed under dependencies. We’ve set up everything, now it’s time to write some code!

First, open server.js in your IDE and type the following code into server.js

const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(3001, () => {
console.log('listening on port 3001...');
});

Now let me explain, at the top of our server.js file we write:

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

The first line of code stores express in a const variable called express, we then invoke an instance of express and store that instance in another const variable called app. You can think of the app variable as our actual web server.

Next, we write:

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

As a brief primer when dealing with web servers, there are a few different request types that we can make to a web server, such as GET, POST, PUT, DELETE, but for now, we are only going to focus on GET requests. A GET request is what happens when the client, which is just a person on an internet-connected device or in this case your computer, makes a request to the web server, asking the webserver to display the website. When you visit websites on the internet and type the URL and hit enter, you are sending a GET request to the web server requesting the website page, and the webserver will respond with the web page.

The code we have written here has a couple different components,

app.get()

Simply tells our server that we are setting up the route for a get request.

app.get('/');

The portion you see there, with the forward-slash inside of the single quotes, tells our web server what route on the webserver we are handling. The forward slash is the representation of our homepage, so we are telling our web server that we are handling get requests on our homepage. So far so good

Now, we have to handle the requests and responses that come from this route that I mentioned earlier:

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

What we are doing here is, with the arrow function is set up two parameters req, and res, which stand for request and response respectively, and is used to handle those incoming requests and to send responses to the client.

For our web page, we want to simply display ‘Hello World!’ in the browser when we visit our webpage, to do that we write:

res.send('Hello World!');

Which tells the server, when someone sends a request to the homepage, you should respond with ‘Hello World!’ to their browser.

Now for the final part of our file:

app.listen(3001, () => {
console.log('listening on port 3001...');
});

This function, tells our server which port to listen on with the first parameter, so we want it to listen on port 3001 so we pass that as the first parameter. Then for our callback function, we want to log to the console that the server is listening on the port.

Now that we’ve gone through our code, let’s see it in action!

In your command prompt, make sure that you are in the same directory as your server.js file and then type the following command in your command prompt:

node server.js

What you should see in your command prompt is what we logged in the console. earlier, namely ‘listening on port 3001’.

If you see that in your command prompt, open a web browser and type ‘localhost:3001’ as the URL and hit enter, you should now see your web page display ‘Hello World!’.

Congratulations on creating your first web page with Node & Express!

You did well!

I hope that you continue your learning and if you have any questions at all, feel free to leave a comment or shoot me an email at michaelpopedeveloper@gmail.com, I’d be more than happy to help.