/ Web Development

Creating a Web App Using NodeJS

At some point in every techies life they have dabbled with creating a website. Websites sounds complicated... sort of, but not really. There are tons of hosting providers that will host your site and give you a custom template to use. In the past I've used Hostgator, Wix, and Squarespace to create create and host my websites. They have templates you can use and get your site off the ground fairly quickly with minimal effort.

However those providers don't give you granular control on the underlying operating system. This tutorial will show you the complete steps on how to configure your very own server running NodeJS to deliver your website to the world.

Our web app will only return "Hello World" when some one accesses it through the browser, but it will be foundation for future projects involving API.

Why NodeJS? Good question! NodeJS, is considered a "new kid on the block" (released in 2009) when it comes to web development and uses JavaScript as the backend language. It has a large library and very efficient in terms of performance. It comes with NPM as its package manager which makes installing modules a breeze.

What you will need...

To get started, you will need the following:

  1. Linux base VM (I will be using Ubuntu Server 18.04.1 LTS in this tutorial)
  2. NodeJS
  3. Express
  4. Basic knowledge of Javascript

Setting up

SSH to your Ubuntu VM and create a directory for the web server. I created mine in the root directory.

mkdir /webapp

Install NodeJS, I will be using version 11.1.0.

curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
sudo apt-get install -y nodejs

Once the installation has completed, verify the install by checking the version of node and npm. (Npm is the package manager for NodeJS)

scleft@ubu-dev:/webapp# node -v
v11.1.0
scleft@ubu-dev:/webapp# npm -v
6.4.1

Looks good to me, let's get started with the fun stuff.

Enter the command npm init. This will initialize the project and should create a file called package.json.  

It will ask you for the following details, feel free to enter your details, however on the entry point please make sure to use app.js:

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (webapp)
version: (1.0.0)
description: my first web app
entry point: (index.js) app.js
test command:
git repository:
keywords:
author: phil afable
license: (ISC)
About to write to /webapp/package.json:

{
  "name": "webapp",
  "version": "1.0.0",
  "description": "my first web app",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "phil afable",
  "license": "ISC"
}


Is this ok? (yes) yes

Next step is to install the dependencies for our web app. We will need Express to be installed. Express is a web application framework that will help get the web app up and running.

npm install express --save

In the package.json you should now see a section for dependencies. Also you should see a node_modules directory. This will hold all of the packages we install with NPM.

"dependencies": {
    "express": "^4.16.4"
  }
}

In the root of the webapp directory, create an empty file called app.js touch app.js. This will be the main file for our web application. Node will check this file on how to run certain features. As you can probably tell from the extension, app.js is written in JavaScript.

Open up the file in your favorite editor and let's start by importing Express.

vim app.js

Time to dive into Javascript! Import Express and then go ahead initialize it for use:

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

This will tell NodeJS to use Express when starting up our web app.

Now we will add a route. Not a network route, but instructions on how to serve a user a particular page.

I'll tell the app that if someone wants to reach my web app from a browser, send them a plain text page that says "hello world".  

app.get("/", function(req,res){
    res.send("hello world");
});

Now that we have something to show the client when they access the URL or IP address, let's continue with how we want our app to function. Specifically what port and IP address it should use.

app.listen(80, process.env.IP, function(req,res){
    console.log("####################");
    console.log("## SERVER STARTED ##");
    console.log("####################");
});

Let's break down the entry above! App.listen(80, process.env.IP tells NodeJS to server the web app on port 80 and use the default IP address. The console.log statements will only be shown on the backend indicating that the server started up successfully. If you don't include this NodeJS will not provide any indication that the server started up.

Once you have everything in place your app.js file should look like this:

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

app.get("/", function(req,res){
    res.send("hello world");
});

app.listen(80, process.env.IP, function(req,res){
    console.log("####################");
    console.log("## SERVER STARTED ##");
    console.log("####################");
});

Save it and close your editor. To start the app enter this command node app.js. You should see the "SERVER STARTED" message indicating our web app started up.

scleft@ubu-dev:/webapp# node app.js
####################
## SERVER STARTED ##
####################

Time for the real test, let's check to make sure we can see "hello world" when we try to reach the IP address of our web app. Open up your favorite browser and enter the IP address of the server (mine is 192.168.132.129).

As you can see below I'm greeted with "hello world".

`

Success! Okay time to clean up...

You may have noticed that once you log off the server, the app stops or that you can't do anything in the backend while the app is running. To get around this you can run the node command in the background by appending & when you start up the app.

node app.js &

Now you can continue to use the same session or log off while the app continues to run in the background.

To check if the app is running you can do a ps -ef | grep node , netstat -tulpn | grep node or check the IP address via a web browser.

scleft@ubu-dev:/webapp# ps -ef | grep node
root      23050  22888  0 17:45 pts/0    00:00:00 node app.js
scleft@ubu-dev:/webapp# netstat -tulpn | grep node
tcp6       0      0 :::80                   :::*                    LISTEN      23050/node

That is it for now! In the future I'll build off of this example and incorporate APIs!

Creating a Web App Using NodeJS
Share this