Saturday, May 9, 2020

Creating Basic Express Application


Creating a basic express application


This tutorial on Node.js and Express.js is a guide to create a basic "skeleton" website project that we can populate with site-specific routes, templates/views. The task is very simple, as we just need to invoke the template generator on the command line with a new project name. We can also specify the project template engine and CSS generator. If it is not specified Pug(renamed to Jade) will be default template engine.

We have already seen how to install express and application generator in the previous tutorial.

Install the Express Application Generator

Install the Express Application generator using the following command.

npm install express-generator -g

Now create a folder (e.g. simApp) in which you want to create your website application and run the express command to create the basic skeleton of the website.

express
The result will appear as,

C:\Users\user\Desktop\simApp>express

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : public\
   create : public\javascripts\
   create : public\images\
   create : public\stylesheets\
   create : public\stylesheets\style.css
   create : routes\
   create : routes\index.js
   create : routes\users.js
   create : views\
   create : views\error.jade
   create : views\index.jade
   create : views\layout.jade
   create : app.js
   create : package.json
   create : bin\
   create : bin\www

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=simapp:* & npm start

The folder will be containing all the folders and files and it will be populated as, 

simApp
│   app.js
│   package.json
├───bin
│       www
├───public
│   ├───images
│   ├───javascripts
│   └───stylesheets
│           style.css
├───routes
│       index.js
│       users.js
└───views
        error.jade
        index.jade
        layout.jade


npm install


Now run the 

npm install 

Command to install all the dependencies mentioned in the package.json. Once this command is executed the basic template website can be run. 

Run Application


To run the application on Windows, use the following command:

SET DEBUG=simapp:* & npm start 

On macOS or Linux, use the following command:

DEBUG=simapp:* npm start 

Open the browser and load http://localhost:3000/ to access the app.

Any changes in the website will not be visible until the entire server is not restarted. We can install nodemon tool to solve this problem.

npm install --save-dev nodemon

This tool can be installed globally using the

npm install -g nodemon 
by default, the website will appear like,



Template Engine


A Template can be written using a number of different languages. A template engine is a program that is used to compile a template into HTML. The template engine can obtain data from an external source that can be injected into the template at the time of compilation. 

Template Engine



Modifying the Website


The application is using Pug(Jade) for the front-end JavaScript framework. At the front-end, it uses a simple markup code that is compiled to HTML. The app.js set the view engine as Pug(Jade) as

app.set('view engine', 'jade');

First, go to the routes-> index.js, and replace the following code,

router.get('/'function(req, res, next) {
  res.render('index', { title: 'Express' });
});

with the code below,

router.get('/'function(req, res, next) {
  //var ;
  res.render('index', data={ 
    title: 'Express',
    from: 'ProgrammingHunk',
    message: 'A Simple Express.js and PUG(JADE) Tutorial' 
    });
});


then, go to the views->index.jade and replace the code with,

doctype html
html(lang='en')
 head
   title=title
 body
  p
  h1 Welcome from #{from}
  h3 Message #{message}

Now, we can run the application using 

npm start
The results will appear as,