Scaffolding your Nodejs Express Application| Express Generator

Scaffolding your Nodejs Express Application| Express Generator

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, and build files and dependencies.

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

You can also check other posts on npm command deprecate option is deprecated

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 a 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 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```

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 examples of how express command can be used.

Generates a default application in the current folder
express

To create a jade engine with foldername

```markdown
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 as 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 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.