In my previous post, we have discussed about “Express JS and Express Generator Basics, Express JS Sample WebApplication”. In that post, we have not used any Node IDE to develop application. We have developed that application using Express Generator module.

Express Generator is a Node JS Module related to Express JS Framework. It is used to get start the development of Express JS WebApplication in few minutes.

In this post, we are going to develop same Express JS WebApplication using Enide Studio 2014 Node IDE.

Before starting Express JS WebApplication development, first we need to install Express JS module. Please refer my previous post to Install and Basics of Express JS Module.

Express JS WebApplication and Routings with Enide 2014 IDE

We will develop a Express JS WebApplicaiton with some useful Routings using Enide 2014 IDE. So for we have create “Node.js Project” using Enide Studio 2014 IDE. But now we need to create Node.js Express Project. Please select “Node.js Project” rom “New” wizard. Click on “Next” button.

    • Please create a “Node.js Express JS Project”(Please refer my previous post to get more information about “How to use Enide Studio 2014 IDE“)

nodejs-express-project-450x435

Provide our Express JS WebAppilcation name “expressjs” and click on “Finish” button.

nodejs-express-projectname-engine-450x437

If we observe this screenshot, this wizard will select the following two default options

  1. Express JS Framework Template Engine: Jade
  2. Express JS Framework CSS(Stylesheet) Engine: CSS

NOTE:- Jade is a Template Engine framework. Using Jade, We can develop HTML pages very easily and quickly. All Jade Template files have “.jade” file extension.Please refer some online articles on Jade Framework.

Express JS Sample WebApplication places

  1. All Jade Templates under /${ExpressJS_Project_ROOT_DIR}/views/*.jade.
  2. All CSS fukes under /${ExpressJS_Project_ROOT_DIR}/public/stylesheets/*.css.

These are default folder options. We can change them as per our Project requirements but update them in all *.js files accordingly.

  • Enide Studio 2014 IDE will create a Express JS WebAppilcation Project structure looks like this

  • It automatically creates package.json file with the following content

package.json

{
“name”: “expressjs”,
“version”: “0.0.0”,
“private”: true,
“scripts”: {
“start”: “node ./bin/www”
},
“dependencies”: {
“body-parser”: “~1.12.4”,
“cookie-parser”: “~1.3.5”,
“debug”: “~2.2.0”,
“express”: “~4.12.4”,
“jade”: “~1.9.2”,
“morgan”: “~1.5.3”,
“serve-favicon”: “~2.2.1”
}
}

  • It downloads all required Node JS modules under “node_modules” folder as shown below.

  • It automatically creates a main app.js file at Project root directory.

To create Express JS Application

var express = require(‘express’);
var expressApp = express();

We can use require(“express”) call to load Express JS module into our Node JS Application memory.

  • Execute the application and observe the output

Open command prompt at Project root folder and start the application using the following command:

Now our Express JS WebApplication is up and running. It’s time to access this application using this url: https://localhost:3000.

Now we are able to see our WebApplication output.

  • Observe Express JS WebServer console

When we access our Express JS WebApplication using https://localhost:3000 url, Web Browser sends a HTTP GET request to Server. Server receives this HTTP GET request, processes the Client request, generates the response and send the response back to Web Browser.

We can observe this at WebServer console as shown below:

Here GET is HTTP GET request method, “/” means client requested this url and “200” is “Success” response code.

Like “Express JS and Express Generator Basics, Express JS Sample WebApplication” post, here also we have created similar Sample Express JS WebApplicaiton. But using Enide Studio 2014 IDE.

We will discuss about “How Express JS deals with Routings” in my coming post.

By admin

Leave a Reply

%d bloggers like this: