What is Plop – File Generator Tool System
Tags: agilewebandappde, plop
Published: 2020-03-04 13:49:55

---
title: What is Plop – File Generator Tool System
published: true
tags: Agile web and app de,plop
canonical_url: https://apiumhub.com/tech-blog-barcelona/plop-file-generator-tool/
---

## What is Plop?

Plop is a file generator tool system which allows you to define a script file to generate all the boilerplate files for you. Similar in how [Angular schematics](https://angular.io/cli#schematics) works, you can define a set of actions who would generate all the pre-defined code for you either automatically or by answering to some CLI prompts.

First you will need to define a `plopfile.js` who would contain a function who would receive a `plop` object with access to [all the methods](https://plopjs.com/documentation/#plopfile-api) to generate the code.

```
module.exports = function (plop) {
    plop.setGenerator('components', {
        description: 'This will generate the components folder',
        prompts: [{
            type: 'input',
            name: 'name',
            message: 'type the name for your components folder'
        }],
        actions: [{
            type: 'add',
            path: 'src/components/{{name}}.component.js',
            templateFile: 'plop-templates/components.hbs'
        }]
    });
};

```

- First of all we will use the [`.setGenerator`](https://plopjs.com/documentation/#setgenerator) function using `'components'` as the generator name, so if we want to trigger this generator we would use `plop components`. 
- Then, in the `prompts` array, we will define a array of [InquirerQuestion](https://github.com/SBoudrias/Inquirer.js/#question) we could later use the input values for these question as parameters in our templates.
- Finally, `actions`, who accept a array of [ActionConfig](https://plopjs.com/documentation/#interface-actionconfig), these actions will act on the files we will create and adapt them according to our needs.

We will also need to add a new folder were we will store our template, I will call it `plop-templates` and add a new file `components.hbs`.

```
<br />{{name}}

```

We will have the following structure:

![initial folder structure](https://user-images.githubusercontent.com/32362841/55502320-99d6b880-564c-11e9-9102-9fda329dbc98.png)

Now if we jump into the console in within our folder where we have the plopfile file and type `plop components` we will be asked `'type the name for your components folder'` which is the message we defined in the `message` key for th object of the prompts array. After answering it will generate a folder with the answer we provided, in my case was `test-components`.

After this we will have the following structure:

![folder structure](https://user-images.githubusercontent.com/32362841/55502251-7449af00-564c-11e9-934c-617f92da0d00.png)

And if we open the generated `test-components.js` we will see that the `{{name}}` variable has been modified with the name we provided in the console:

```
test-components

```

## When to use Plop

Now that we saw a simple example of how it works we can start creating more complex templates to automate our task. For example, we will create a new generator to generate all our Redux boilerplate for us.

`main.hbs`

```
import { Action } from '@ngrx/store';

// constants

// actions

export type {{pascalCase fileName }}Actions =
;

```

`constants.hbs`

```
export const {{constantCase actionName}} = '[Talents] {{actionName}}';
export const {{constantCase actionName}}_FAIL = '[Talents] {{actionName}} Fail';
export const {{constantCase actionName}}_SUCCESS = '[Talents] {{actionName}} Success';

```

`actions.hbs`

```
export class {{pascalCase actionName}} implements Action {
public readonly type = {{constantCase actionName}};
constructor(public payload) {}
}

export class {{pascalCase actionName}}Fail implements Action {
public readonly type = {{constantCase actionName}}_FAIL;
constructor(public payload) {}
}

export class {{pascalCase actionName}}Success implements Action {
public readonly type = {{constantCase actionName}}_SUCCESS;
constructor(public payload) {}
}

```

`typeExport.hbs`

```
| {{pascalCase actionName}}
| {{pascalCase actionName}}Success
| {{pascalCase actionName}}Fail

```

`ploplfile.js`

```
module.exports = function (plop) {
    plop.setGenerator('actions', {
        description: 'This will generate the actions file',
        prompts: [
            {
                type: 'input',
                name: 'fileName',
                message: 'type the name for your file'
            },
            {
                type: 'input',
                name: 'actionName',
                message: 'type the name for your action'
            }
        ],
        actions: [
            {
                type: 'add',
                path: '{{pascalCase fileName}}.actions.ts',
                templateFile: 'plop-templates/actions/main.hbs',
                skipIfExists: true
            },
            {
                type: 'append',
                path: '{{pascalCase fileName}}.actions.ts',
                pattern: /(\/\/ constants)/g,
                templateFile: 'plop-templates/actions/constants.hbs',
            },
            {
                type: 'append',
                path: '{{pascalCase fileName}}.actions.ts',
                pattern: /(\/\/ actions)/g,
                templateFile: 'plop-templates/actions/actions.hbs',
            },
            {
                type: 'append',
                path: '{{pascalCase fileName}}.actions.ts',
                pattern: /(export\s+type\s[\w]+\s=)/g,
                templateFile: 'plop-templates/actions/typeExport.hbs',
            }
        ]
    });
};

```

[Link to the repo](https://github.com/arnausd23/plopfile-article/tree/master/test-plop)

The post [What is Plop – File Generator Tool System](https://apiumhub.com/tech-blog-barcelona/plop-file-generator-tool/) appeared first on [Apiumhub](https://apiumhub.com).