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.

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,

ProgrammingHunk