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.
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.
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.
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:
On macOS or Linux, use the following command:
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.
This tool can be installed globally using the
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 nodemonby 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
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,