{

Scaffolding your Nodejs Express Application| Express Generator


Scaffolding your Nodejs Express Application Express Generator example

ExpressJS is a Framework for building backend applications using Nodejs.

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

These tools generate standard application prototypes with required files to start up and run, generate folder structure, build files and dependencies.

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

express-generator

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

First, install this tool using node commands.

you can use the 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 the express command now.

Type the below command

express --view=pug express-app

It outputs and creates a folder express-app in the current directory and the app engine 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```

It generates an express application with default settings.

It is a quick and easy way to create an app.

Once the application is created, Go to the root 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 opens http://localhost:3000 in the browser to access the application.

Following are the examples of how to express command can be used.

Generates a default application in the current folder
express

To create a jade engine with foldername
```markup
express --view=jade foldername

express generated directory structure

Here is a folder structure generated with this tool.

├── app.js
├── package-lock.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascript
│   └── 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 dependencies.

npm install -g yo

Next, Install generator-express using the npm command.

npm install generator-express -g

Next, generate an application using yo express.

yo express

Following are the steps for generating an application.

  • Select an MVC or basic version to install, basic is the 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 these steps are configured, It generates an application folder structure.

Here is the 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 the server using the npm run start command

Conclusion

To Sum up,

We explored two ways of creating an express application.

You can choose on the way to generate an application I always use an express-generator to generate an application. It is very quick and easy and saves a 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.