loading...
Cover image for Automating boilerplate code generation with Node.js and Handlebars

Automating boilerplate code generation with Node.js and Handlebars

kapantzak profile image John Kapantzakis ・3 min read

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, a project specific node cli that uses Handlebars 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

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

  "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

Alt Text

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

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 to read templates and create new files
  • chalk to display console test in color
  • figlet to display beautiful fonts on the console
  • inquirer to create the cli
  • log-symbols to display simple icons
  • treeify to produce tree structures for the console
  • xml-js to read, edit and create xml documents
  • yargs for arguments parsing
  • 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

Posted on by:

kapantzak profile

John Kapantzakis

@kapantzak

Web developer - want to learn something new every day

Discussion

markdown guide
 

What's the advantage compared to T4 since you generate csharp files ? docs.microsoft.com/en-us/visualstu...