Post
Ask Question

Generate App Skeleton Using Express-Generator In Node.js

Introduction
 
In this article, we are going to learn how to create the application skeleton using express application generation tool, which provides us a basic file structure to get started by writing a series of commands.
 
By default application skeleton contains a number of files required for your project, after that we can add more files as per our project requirements, app skeleton makes our task easier and we do not need to create project from scratch.
 
Express development environment
 
Express development environment is a configuration of any application which follows MVC pattern, for that we need to install a few libraries to get started with development environment.
  • NPM (Node Package Manager)
  • Express generator (Not compulsory) 
  • Any IDE like : Visual studio code , Sublime etc ..
  • Any source control tool like GIT
Using express-generator
 
As we have discussed earlier, we are using generator tool of express to create our application skeleton, which provides a few files by default like : index.jade, error.jade, package.json etc, let's start by creating our demo application. 
 
First step is to install the express-generator, now just open the console and execute the below command.
  1. npm install -g express-generator  
And than we need to create application, by just writing the single command as given below.
  1. express demoapp  
  • So far we have created our application by just following two steps, and you can see the below output screen into your console.
          
 
Now change the current directory to newly created project by writing cd <project_name>, and install all the dependencies by writing the below command.
  1. npm install  
  • After completion of  all the steps, our application skeleton looks like the given screenshot
           
 
Our skeleon created by express-generator contains a few of the default files listed below :
  • bin folder
  • public folder which contains css , javascript and images
  • routing related file
  • view's file
  • main entry point of our app - app.js
  • package.json  
Now open package.json file and there you can see the list of dependecies installed in our project 
  1. {  
  2.   "name": "demoapp1",  
  3.   "version": "0.0.0",   
  4.   "private": true,  
  5.   "scripts": {  
  6.     "start": "node ./bin/www"  
  7.   },  
  8.   "dependencies": {  
  9.     "cookie-parser": "~1.4.3",  
  10.     "debug": "~2.6.9",  
  11.     "express": "~4.16.0",  
  12.     "http-errors": "~1.6.2",  
  13.     "morgan": "~1.9.0",  
  14.     "pug": "2.0.0-beta11"  
  15.   }  
  16. }  
Inside the dependencies section, you can see the installed list of packages.
 
Like - express, pug, http-errors etc .. 
 
By default generated project's view is based on jade engine, but we can create view with different view engines. 
  • Jade (deprecated , now known as Pug)
  • Pug 
  • ejs - Embedded Javascript Template
  • hbs - Handlebar 
To change the template engine to use with your project,  we need to specify which template engine we want to use in our application.  
  1. express -e --pug // To use pug engine  
  2. express -e --ejs // To use ejs engine  
  3. express -e --hbs // To use handlebars  
There is another way to change our template engine to the  below command.
  1. express demoapp --view=pug // or other like ejs or hbs     
  • In this demo, I have use pug as a template engine, and you can see now my file structure somewhat like the below image. 
        
  • So far we have created our application using express-generator and now it's time to check output by following url localhost:3000
            
This is how we have created our application by just writing few commands, now we are ready to move further, and let's enable our server to be restarted automatically. 
 
For that you can follow my article using nodemon.
After following the instructions given in the above article, you can see that after every  change, the server automatically restarted.
  1. nodemon MyApp.js // continious watch on MyApp.js file for any changes  
Which demonstrates how to enable our server to be restarted without stopping and restarting server manually. 
 
Conclusion
 
So far we have covered a few things which are listed below for quick review,
  • What is Express Development Environment
  • Prerequisites to configure development environment
  • What is express-generator
  • How to install express-generator
  • Changing default view engine for app
  • Enable automatic server restart 
Follow my other nodejs articles,
I hope you find this article useful. If I missed something important, do let me know in the comments. Thanks for reading!!!


Similar Articles