Build Your First Local Server and Web App With Node.js

How to set up a local server and start running your app with Node.js

Christoph
Christoph
Nov 3, 2018 · 6 min read

In this brief tutorial, you will learn how to set up a local server with Node.js. By the end, you’ll be able to run a basic app version on your own virtual server.

Let’s get started! 🚀


Why Do You Need a Web Server and What Is It Anyway?

A virtual web server runs on your own computer with the use of server software. If you’re an aspiring developer you’ll most definitely want to set one up, as it allows you to test the features of any web application that you’ve built.

Imagine uploading your website or app for the world to see without testing it online. There wouldn’t be any way to be sure if it works fine for other users. Sounds bad, right? So, it’s good practice to always check how the features you’ve created work when accessing your site online.

Install Node.js

To get started, first, we will need to install Node.js, which is a run-time environment for JavaScript (👉 in English: Node will help you execute JavaScript code).

Many developers get excited when talking about Node. Before Node, only web browsers like Google Chrome had a JavaScript engine that could read and display code written in JavaScript. For Chrome, this interpreter is called V8. The feature which made Node so popular is that it allows JavaScript to run basically on all machines — which means the browser is no longer a restriction for the execution of JavaScript.

It’s safe to say that Node is the best choice when building a simple server for all kind of web apps. So let’s install it. Let’s look at two ways, one quick method of installing and another option that’s a bit more complex at first but later on much more convenient.

  1. Go to the official page of Node.js and download the install package for your operating system. Use the LTS version, not the current one.
  2. After the download is complete install the package like any other app on your Mac or PC
  3. Next, you can go to your Terminal program of choice. In case you don’t have a Terminal app like iTerm2 or Hyper installed, simply open the Terminal that comes pre-installed on every Mac. If you are a Windows user, check here.
  4. You can type the following command into your Terminal to see if everything was installed correctly: $ node -v. If it works fine you should see a Node version number now. Also, check if npm was installed with $ npm -v. Npm is the Node Package Manager that comes with Node when being installed. We will use it in the next steps to install Express and start our virtual server.

Instead of the above-described way, I prefer using Homebrew, which is a package manager for macOS. It allows you to install missing apps super fast via the Terminal. Windows users must take another package manager like Scoop instead. They are pretty similar and for demonstration purposes, I will show you how to install Node via Homebrew.

  1. Again, \go to the Terminal and paste the following prompt (without the $-sign) in there. In case you’re wondering: it simply checks the GitHub repository from Homebrew and installs the app from there.
    $ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)
  2. If Homebrew was installed correctly, we will be ready now to install Node with this simple command: $ brew install node
  3. You can check if everything is looking good by typing in: $ node -v and $ npm -v (which should give you the version number of your installed Node).

But why make this effort to install Node via a package manager like Homebrew? There are several reasons this is a good idea:

  • If you are using Node’s install manager it is possible that you run into access issues that require you to make changes in your system using a command called $ sudo.
  • Also if you ever want to uninstall without Node this will be very messy as you need to track all the files that were created.
  • Lastly, also it’s much easier to keep your Node version up-to-date when using Homebrew.

Set Up Your First App

You’re still with me, right? Great, so let’s finally go on and build an actual web app and local server!

To do this quite conveniently we can use the express-generator, which is a great command-line tool that creates an application skeleton for us. Otherwise, you would be required to write more advanced code like setting up a server instance, configuring a view engine, etc. Although this is great to know, it will not be necessary to run your first app on a web server.

Express-generator is straightforward. Simply take the following command and hack it into your terminal: $ npm install express-generator -g. With the -g we install Express globally which means that you can access the package from any directory.

While still on the Terminal you can now create a new app with express-generator by typing: $ express -v ejs -c sass myapp. In this example, myapp will be the name of your project. And guess what? You have just built your first app! To visit the myapp directory that we’ve just created, you can type $ cd myapp.


Admire the App You’ve Just Built

Take a look at the myapp project that you have just created. To see your files in the code editor just use this line: $ code . while still being in the myapp folder on your Terminal.

For this to work, you must, of course, have installed a code editor like Visual Studio Code or Atom.

When opening the editor you can see the project and all the files that were automatically created for you with Express generator. Within index.ejs, you can make edits and build your complex web app from there. For now, let’s just leave it as is and continue to build our server.

Setup of express-generator within the code editor

We are almost there.

Last thing: we must install various additional third-party packages (which are listed as dependencies in the package.json file). These are commonly required by Express to run the server as you would expect it. Good news is that this will be pretty easy as you can install all of these via npm at once. Open up your Terminal and use this prompt:

$ npm install. You can check if your installation was successful by going into your code editor again. You will see a new folder called node_modules like in my example above (hint: exclude this in case your uploading to GitHub).


Start Your App on a Virtual Web Server

Finally, let us run our app on a web server. Most of what’s necessary was already done in previous steps! Two simple steps and you are there:

  1. While in the Terminal, prompt this command: $ npm start. This will start a virtual server.
  2. Go to the address bar of your internet browser and type localhost:3000. Localhost is a top-level-domain (TLD) just like .com or .org. However, it’s reserved for documentation and testing purpose. With :3000 you call the default port to access the newly built server.
Welcome screen on your local server once the Express app is running

Where to go from here

Congrats! You have created your first app and ran it on your own server. From here you could start building your custom app. The app skeleton is already setup in a way that allows you to build your site within the index.ejs. If you want to build anything more advanced than a simple site you should consider using partials. It means that you build your app in components that you can reference from your index.ejs. Conveniently, we have already installed the view engine EJS that will help you while building specific parts of your app in components.

Thank you for reading. I really hope you found this tutorial helpful.

Better Programming

Advice for programmers.

Christoph

Written by

Christoph

Software engineer 🚧 from Hamburg, Germany ⚓️

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade