Express JS WebApplication with Enide Studio 2014 IDE

Filed Under: Node.js

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

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

    nodejs-express-projectname-engine

    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
  • nodejs-express-project-structure

  • It automatically creates package.json file with the following content
  • package.json
    [js]
    {
    “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.
  • nodejs-express-nodemodules

  • It automatically creates a main app.js file at Project root directory.
  • To create Express JS Application
    [js]
    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:

    
    npm start
    

    nodejs-express-execute

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

    express_sample_webapp_output

    Now we are able to see our WebApplication output.

  • Observe Express JS WebServer console
  • When we access our Express JS WebApplication using http://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:

    
    GET / 200 283.840 ms - 170
    

    nodejs-express-server-console

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages