Scaffolding your Nodejs Express Application| Express Generator


ExpressJS is an Framework for building backend applications using Nodejs

yeoman is a popular tool to scaffolding an applications in modern javascript applications.

These tools generates standard application prototype with required files to start up and running including folder structure, build files and dependencies

Expressjs has a scaffolding tool. There are two ways to easily generate express application using npm commands.

express-generator

express-generator is a command line tool that helps in quickly create an application.

First install this tool using node commands

you can use npm command

npm install -g express-generator

Once installed, type the following command to check what you can do with express generator

B:\githubwork>express --help

  Usage: express [options] [dir]

  Options:

        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
        --no-view        use static html instead of view engine
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory
    -h, --help           output usage information

Let’s generate an application using express command now

Type the below command

express --view=pug express-app

This outputs and creates a folder express-app in current directory and app engine is configured with --view=pug.

B:\githubwork>express --view=pug express-app

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

   change directory:
     > cd express-app

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=express-app:* & npm start```

This generates an express application with default settings

This is quick and easy way to create an app.

Once application is created, Go to folder and install dependencies

cd express-app
npm install

Finally, Type the command to start the application

npm run start

This starts an application and open http://localhost:3000 in the browser to access the application.

Following are the examples of how express command can be used

Generates an default application in the current folder
express

To create an jade engine with foldername

express --view=jade foldername

directory strurture

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

7 directories, 10 files

yeoman express generator

First, install yo dependencie

npm install -g yo

Next, Install generator-express using npm command

npm install generator-express -g

Next generate an application using yo express

yo express

Following are steps for generate an application

  • Select a MVC or basic version to install, basic is default
  • Select a view engine to use from EJS
  • Select a Sass LESS or css preprocessor to use: Sass
  • Select MySQL or postgres database to use:MySQL
  • Select Gulp/grunt a build tool to use: Gulp

Once this steps are configured, It generates an application folder structure

Here is command output

B:\githubwork\yo-app>yo express
? Would you like to create a new directory for your project? No
? Select a version to install: MVC
? Select a view engine to use: EJS
? Select a css preprocessor to use: Sass
? Select a database to use: MySQL
? Select a build tool to use: Gulp
 conflict package.json
? Overwrite package.json? overwrite
    force package.json
   create .editorconfig
   create .gitignore
   create app.js
   create test\app\config\config.js
   create test\app\config\express.js
   create test\app\controllers\home.js
   create test\app\models\article.js
   create test\app\models\index.js
   create config\config.js
   create config\express.js
   create app\controllers\home.js
   create app\models\article.js
   create app\views\error.ejs
   create app\views\footer.ejs
   create app\views\header.ejs
   create app\views\index.ejs
   create public\css\style.scss
   create gulpfile.js
   create app\models\index.js


I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.

once installed, You can run server using npm run start command

Conclusion

In this post, We explored two ways of creating an express applications.

Yon can choose on the way to generates an application I always use express generator to generate an application, It is very quick and easy and saves lot of time.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.