Automate repetitive work with PlopJs
Do you work on a project that has a lot of repetitive, error prone, and detailed work? If so, man, you NEED to know about plopJs. Last year I worked on a big React project that we wouldn’t been able to deliver in the time we did without it. More recently I joined a .Net Core project that has a very detail-oriented (and time consuming) architecture where a lot of the work is making sure the right things are “plugged” in the right places. That’s when I remembered plop and thought hmmm…. what if I could generate all this boilerplate code and save my energy to focus on what actually matter?
So here comes a quick intro on plopJs:
What is plop?
A quick, powerful, and most importantly, EASY to use code generator.
It concist of, questions, actions, and a template to generate the code from.
Questions : What are you asking from the user? e.g. Do you want to create a controller? What is the name of the controller?
Actions: What will you do with the answer? Create a new file, modify an existing file, create many files?
Template: That’s the base code that you want to generate by replacing some values
Alright, enough talk! Show me some code!
First, we need to install plop.
Open your project directory on your preferred command line.
To install it on the project use:
$ npm install --save-dev plopTo install it globally:
$ npm install -g plopNow create a new file in your folder, called plopfile.js (why not be specific? :P)
Now this is where the fun begins. Here is a basic plop generator, let’s take a look:
Lets have a quick walk through on this line by line:
Line 1: function receives plop.
Line 3: call method setGenerator, passing the generator name ‘simple file’ and the object that the generator expects.
Line 4: set the object description, e.g what is it that the generator will do.
Line 5: set the prompts array with the questions you need ( prompts use inquirer.js as its engine).
Line 7: define the question type; is it a list, an input a check list? In our case it is an input type since we want to store the value typed.
Line 8: the variable name that will store the value of what the user enters.
Line 9: the message you want your question to display.
Next are the actions you want to take with the given answers.
Line 14: define the type of action you want to take; for this example we are using add since we want to create a new file. It could be addMany, modify or any of the other built-in option.
Line 15: define the path where you want your new file to be created and what its name will be.
Line 16: define your template; In our case we are doing an inline template that will be embedded in our output file.
Now with that done, just go back to your terminal window and type plop:
It will ask you the question and wait for your answer ( in our example, world).
After that you will see the confirmation that it created the new file for you.
That’s it, you have a basic generator defined and ready to use.
Usually this is not enough. What you will end up needing is to actually create your generators in separate files and reference them in the plopFile.js
Here is an example.
const componentGenerator = require('./component/index.js');const containerGenerator = require('./container/index.js');const actionGenerator = require('./action/index.js');const reducerGenerator = require('./reducer/index.js');const apiGenerator = require('./api/index.js');
module.exports = plop => {plop.addHelper('upperCase', text => text.toUpperCase());plop.setGenerator('component', componentGenerator);plop.setGenerator('container', containerGenerator);plop.setGenerator('action', actionGenerator);plop.setGenerator('reducer', reducerGenerator);plop.setGenerator('api', apiGenerator);};
Here is how the project folder looks like, whereas index.js is my api generator, notice the api.js.hbs files, these are the templates, they use handlebars engine that’s why the extension .hbs
DISCLAIMER: the .js before the .hbs isn’t really needed, I like it because gives me a certain visibility of the file i’m trying to create, so I look at it and see a template ( .hbs ) that will create an api.js file for me.
My plopFile is in the root while the generators and its templates are organized into separate folders. As you can see, for my API generators I have 4 different templates, witch are part of an example for a React project I also added the action files, modified the actionTypes list adding the new actions created, and added an API and reducer file.
So, to recap, with a few simple questions I’m able to quickly generate 3 new files and modify an existing one. Of course they still required some minor tweaks but the big parts and references each other are already created and defined for me.
That’s it!
Let me know what you think and if you have any questions in the comments.
And don’t forget to check plop’s documentation!
