Creating a Simple Web App with Node.js

In this lesson we are going to create a simple Web Application with Node JS In the process you are going to learn how to modularize the code. So let's get started. 

This is how the document structure looks like, I have opened the code editor and the terminal.

the first thing we'll do is to import the http module like such

var http = require('http')

and immediately create a server http.createServer and onRequest it's going to listen to the port 8000 like such

http.createServer(onRequest).listen(8888);

var http = require('http')

http.createServer(onRequest).listen(8888);
console.log('Server has started');

function onRequest(request, response){
  response.writeHead(200);
  response.write('Hello Noders');
  response.end();
}

Write node webapp in the terminal and you notice the server has been started

The text shows up in the browser if you refresh it and regardless of what the URL was. 

If you write anything in the URL tab instead of contact, about etc it will still load Hello Noders because it's not taking anything into consideration about what is actually loaded on the page.

The next thing we're going to do is listen for what kind of path the user has been requesting. To do that, we're going to use another module as shown below which will parse the URL parameter var url = require('url') and below say var pathName and we are going to parse the request url. Also we'll console.log for demonstration

var http = require('http')
var url = require('url')

http.createServer(onRequest).listen(8888);
console.log('Server has started');

function onRequest(request, response){
  var pathName = url.parse(request.url).pathname
  console.log('pathname' + pathName);
  response.writeHead(200);
  response.write('Hello Noders');
  response.end();
}

Restart the application in the terminal, write node webapp and hit enter and you notice the Server has been started.

It will print pathname in the terminal which means it's working fine. Another thing we are going to do is that based on the path which is requested, we want to show a different page.

Another thing we're going to recognize, what the pathName is, and based on that show different content. We're going to create an object and called it contentMap and define some key value pairs. If the page is '/' show this content Welcome to the site and if the page is '/contact' then show the contact page

var contentMap = {

 '/': '<h1>Welcome to the site</h1>'
 '/contact' : '<h1> Contact Page</h1>'
}

Also change the pathName as well

We can also write if the pathName is '/' then show the home page. like such 

if(pathName === '/'){
  response.writeHead(200, {'Content-Type: 'text/html'})
  response.write(contentMap['/']);
  response.end();
 }
}

Restart the app and run it again
 


Go to the app in your browser and you see it is working fine

Realistically speaking, your app is going to have a lot of pages. and you will use the if-else statement a lot and it's totally counter intuitive. So if the page doesn't exist, it's going to show the 404 Page not found error.

if(pathName === '/'){
  response.writeHead(200, {'Content-Type: 'text/html'})
  response.write(contentMap['/']);
  response.end();
 }else {
  response.writeHead(404, {'Content-Type: 'text/html'})
  response.write('404 Page not found');
  response.end();
}

Like such

The next thing we are going to look at is how to modularize the application into different pieces. Every piece of functionality should have it's module or a different file. So we will create two files and call it show.js and content.js respectively. But you can call it whatever you want. 

 
And the show.js is going to have the showPage function like such

 
But we have a problem, when the showPage function is run, the showPage function does not exist in the webapp section. In order to accomplish that we can export the module by writing exports.showPage = showPage;

The way it's going to talk to the webapp is like importing a module like such var show = require('./show'); the show file is in the same directory so we used ./show Save it, restart the app

We are going to do the same for content.js as well by writing exports.contentMap = contentMap;

and import the module in show.js file and change contentMap to content.contentMap as shown below. Restart the server by writing node webapp. 

If you go to your application and browse through different pages, you will see that it works fine. Also our code is in more organized fashion.

I hope you enjoyed this lesson. This is just a simple web app to show you that node js is a runtime that allows you to create anything you can imagine. For more advanced lesson, we'll be using Express JS in the lessons section where you will build a more advanced application.

If you have any question, leave your comments below. I'll talk to you soon. Bye :)