Building your first server with Node.js/Express

Image for post
Image for post

In this tutorial, I will be demonstrating how to build a simple server with Node.js. and Express. I will be using VScode as my text editor and I am on a Mac.

To get started you will need to have Node.js installed. You can download it here. Once installed, open your terminal (if you’re using VScode you can type ctrl ~). Run the command node -v in your terminal. You should see the Node version returned in your terminal. I will be using version 12.13.1 for this tutorial.

Image for post
Image for post
Screenshot of VScode terminal displaying installed Node version

Next, we will create a new directory on our desktop. I will call mine simple_server. You can do this by right-clicking on your desktop and selecting new folder.

Image for post
Image for post
Creating our directory

Now we will go back to our VScode terminal and navigate to our Desktop. In your terminal type the command cd Desktop and press enter. You should see that your terminal is now on your desktop.

Image for post
Image for post
Move to desktop

Now run the command code simple_server. VScode should open your newly created folder.

Image for post
Image for post
Opening directory from terminal

If this didn’t work for you, alternatively you can drag and drop the folder to your VScode.

You should see your folder on the left-hand side of the editor. Check your terminal to see that you’re in the right directory as well. It should look like this.

Image for post
Image for post

Hover over the simple_server folder and click new file, save it as server.js. VScode should open the new file for you in the editor.

Image for post
Image for post

Now let's go back to our terminal and initialize our directory. In the terminal (double-check that you’re in the simple_server folder) and run the command npm init -y which will initialize our folder and create a package.json file. You should now see that our package.json file was created.

Image for post
Image for post
Created package.json

In your package.json file, the key “main” should be set to “server.js”. Now back in the terminal run the command npm i express. NPM (Node Package Manger) comes with Node.js. Express.js, or simply Express, is a web application framework for Node.js. It was designed for building web applications and APIs.

You should now see that a folder called node_modules was installed along with a package-lock.json file.

Now that the setup is taken care of. Let's start building our server. In your server.js file, let's bring in express. Don’t forget to save your file after every step. Use the shortcut CMD + s.

Image for post
Image for post

Next, we will create an app variable and set it to an instance of express.

Image for post
Image for post

Now let's give our server something to do. Let's tell our server to send some data to our browser. We do this with the following bit of code.

Image for post
Image for post

The final thing we need to do to get our server to work is to tell it what port to listen on. We do that with this block of code.

Image for post
Image for post

And there you have it. You’ve just built your very first server with Node.js and Express. Congratulations!

Now let’s make it run. In your terminal run the command node server.js. You should see a message saying “Listening on port 3000”.

Image for post
Image for post

Now let's open a new browser window and go to http://localhost:3000/. You should see our message displayed in the browser.

Image for post
Image for post

Let's add another route for our server to listen for. When our server gets a request it will send to the browser any data that we tell it to. Above our app.listen code block let’s add another route for an about page.

Image for post
Image for post

Something to note, running node server.js will require you to kill your server and restart it after every change. This can be done by running the command CTL + c followed by node server.js in your terminal. This can be annoying. Let’s install another node package to help us out. In your terminal run the command npm i -g nodemon. This will take care of restarting our server automatically after we make changes to our server.js file. Now we can simply run the command nodemon in our terminal.

Let’s go back to our browser and add /about to the end of our http://localhost:3000 route and hit enter. You should see that the server sent back the new data to the browser. You should also see a message in your terminal saying “Server received a request for the about page”.

Image for post
Image for post
Image for post
Image for post

I hope you’ve enjoyed this tutorial! If you’d like to learn more, please connect with me on LinkedIn and send me a message!

Thank you for your time!

Sincerely,

Mike Bocon.

Written by

full-stack developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store