Create a web application with Express and Nodejs in five minute


Nodejs revolutionize web application development and now it is the top most tool in web developers tool kit. Express is a Nodejs frame work which help to build applications.

Express is the simple framework Nodejs developer and it is the base for many other web framework as well. For me Express resembles Python’s Flask framework.

Before starting we have to install the following

  1. Nodejs

  2. Express

  3. nodemon

Download and Install Nodejs from official website.

Create basic project folder structure

Create a folder with <ProjectName> (mysite) and create a app.js file using editor (Visual Code IDE / Text Editor /Sublim Text Editor/ Atom Editor).

Create package json file using the following guide

  • Auto generate package.json file for Nodejs project

    Nodejs project is the easiest and fastest way to create web applications. A package.Json file is the configuration file for the Nodejs project, it included all the information regarding the project. The dependencies, developer dependencies, starting scripts and so on. We can manually add a package file to our project. The structure of a minimal package file will be as follows.

    {
      "name": "Project Name",
      "version": "1.0.0",
      "description": "Description of your Project",
      "main": "app.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "Developer Name",
      "license": "ISC"
    }
    

    Auto generate package file

    Node Package Manager can auto generate the package file by issuing the following command on Terminal

    npm init
    
    •  npm will pull few question and answer them or leave it for default and then finally we will get the package.json file.

     

Install developer dependency

nodemon is a developer dependency which will auto reload webpage every time we made  changes. Install it as a developer dependency by issuing following command on terminal

npm install nodemon --save-dev

No we are ready to start with the application. Create the Express instance as follows in app.js file

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

Routes

Next step is to make make set of routes which is the webpages for our site. For simplicity it is holding just messages, you can use complex HTML tags with it, even use templating engine such as EJS ( all that in other post).

app.get('/',function(req,res){
res.send('This is a HomePage')
});

app.get('/about',function(req,res){
res.send('This is a About Page')
});

The get have a route argument and function which also receives req and res arguments. Our web site only return response we don’t have any user input .

Local Host

Finally we need to run the web app on a local host , let’s specify that

app.listen(3000)

The complete app.js

The complete file will look like

var express=require('express');
var app=express()
app.get('/',function(req,res){
res.send('This is a HomePage')
});

app.get('/about',function(req,res){
res.send('This is a About Page')
});

app.listen(3000)

Run the app

You can run the app using nodemon, which help to auto reload project. The second option is use node command and the third create a script and run with npm command (recommended)

 

using nodemon

nodemon app

using node command

node ./app.js

Using npm (Node Package Manager) and scripts

Using a special script to run your project , create a new script in package file

  "scripts": {
  //Your start script
    "start": "node ./app.js",     
    "test": "echo \"Error: no test specified\" && exit 1"
  }

and can run as

npm start

We mad web app, that’s it.

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.