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 plop

To install it globally:

$ npm install -g plop

Now 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!