Automating boilerplate code generation with Node.js and Handlebars
Tags: node, cli, javascript, handlebars
Published: 2020-02-18 15:36:59

In my current job, each time we need to create a new *form* for our web app, we have to create a set of files that contain a serious amount of boileplate code, and this is time consuming.

So, I have tried to build a tool that would automatically produce the initial code, and I came up with [ess-dev](https://www.npmjs.com/package/ess-dev), a **project specific** node cli that uses [Handlebars](https://handlebarsjs.com/) internally.

# Usage

Lets create a dummy project so that we can test our tool.

### Prerequisites
- Node.js installed on your machine
- Internet connection

Create a new folder somewhere in your computer and navigate to it.

```
> mkdir testProject
> cd testProject
```

Initialize a new npm package

```
> npm init -y
```

Install ess-dev package from npm

```
> npm i --save-dev ess-dev
```

We now have to create the following folder structure because our tool searches for specific paths in order to write the new files.

```
.
+-- package.json
+-- Async
+-- classes
|   +--HttpRequestsDataModels
+-- src
|   +--asyncHelpers
|   +--pageScripts
|   +--reduxStates
+-- eStudio.csproj
```

Note that we have to create a file called `eStudio.csproj` with contents that you can find in the following gist

{% gist https://gist.github.com/kapantzak/ef9230eda2d8958b9968b8920a515918 %}

Add a script to the `package.json` so we can use our cli from npm

```js
  "scripts": {
    "ess-dev": "ess-dev init"
  },
```

We are now ready to use our tool!

Assuming that you are in the root directory of the project (On the `package.json` level):

```
> npm run ess-dev
```

When asked to provide a user control name, type any name you want but prefix it with `uc`.

Just hit enter to the next questions and the new files should be created to the specified paths as shown to next images.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lajliyof7n5jdpjrkktp.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5ojbzr96rdk2egniknny.png)

If the tool terminates successfully, it should provide a structure of the newly generated files as shown in the last image.

# How does it work?

Here's an overview of the tool's workflow.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mgnjpqfur33du78owchn.png)

User provides some input, the tool searches for predefined template files, creates the new files from them using the handlebars library and writes them to specific paths.

## Tools used

The following tools have been used in order to develop this tool:

- [handlebars](https://handlebarsjs.com/) to read templates and create new files
- [chalk](https://www.npmjs.com/package/chalk) to display console test in color
- [figlet](https://www.npmjs.com/package/figlet) to display beautiful fonts on the console
- [inquirer](https://www.npmjs.com/package/inquirer) to create the cli
- [log-symbols](https://www.npmjs.com/package/log-symbols) to display simple icons
- [treeify](https://www.npmjs.com/package/treeify) to produce tree structures for the console
- [xml-js](https://www.npmjs.com/package/xml-js) to read, edit and create xml documents
- [yargs](https://www.npmjs.com/package/yargs) for arguments parsing
- [jest](https://www.npmjs.com/package/jest) for testing

# Conclusion

Automating repetitive and time consuming tasks can save you a lot of time and effort while at the same time prevents from human errors.

This tool has been developed for specific project and is not aimed to be used out of the box for other projects. On the other hand, for anyone interested, feel free to get the code and change it according to your needs.


# Links
- [ess-dev: npm](https://www.npmjs.com/package/ess-dev)
- [ess-dev: Github](https://github.com/kapantzak/ess-dev)