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.
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.
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.
Top comments (1)
What's the advantage compared to T4 since you generate csharp files ? docs.microsoft.com/en-us/visualstu...