Continuing our Plop.js journey from the last blog. Be sure to go back and read the previous installment in this series.

In our previous discussion, we explored an introduction to Plop.js and its installation in a Next.js project. Additionally, we looked at a basic skeleton of plopfile.js.

Understanding the Components of plopfile.js

As we saw earlier, the plopfile.js consists of key elements that define the generation. Let’s break them down again for clarity:

• The “setGenerator” creates a plop generator. Here, plopfile.js has a single generator called “basics.”
• The “description,” as the name suggests, describes the purpose of the generator.
• The “prompts” is an array of prompts. This could be added to your created generator.
• The “actions” take the user’s information to each prompt. It is an array of where each action is an object. This is an important step and requires creating some templates.

Creating Our First Template

Before creating a template, understand the concept of actions inside “setGenerator.” After all, this is where the real magic happens. Let’s write a generator to create a new component.

plop.setGenerator("component", {
  description: "Create a new React component",
  prompts: [
    {
      type: "input",
      name: "name",
      message: "What is this component’s name?",
    },
  ],
  actions: [
    {
      type: "add",
      path: "src/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
      templateFile: "plop-template/component.hbs",
    },
  ],
});

Breaking Down the Code

• In the above example, we use the “add” action type, which creates a file at the specified “path” and fills it with a skeleton defined in “templateFile.”
• Plop relies on Handlebars (Handlebars.js), a templating engine for generating structured text like HTML or JavaScript files.
• Notice that the “templateFile” ends with a .hbs extension, which signifies a Handlebars template.

Exploring More Actions

Apart from “add”, there are several other built-in actions like:

• “addMany”
• “modify”
• “append”
• “custom” (for fully customized actions)

You can explore the complete list here: Plop.js Built-in Actions.

Organizing Templates in a Folder

Now that we understand actions, let’s organize our template files.

1. First, create a new folder called plop-template at the root of your project.
2. Inside this folder, create different Handlebar templates for various file types, such as:
   • .tsx for React components
   • .scss for styles
   • .md for documentation
   • .test.tsx for test cases

Handlebars Syntax Example

In Handlebars, variables are enclosed within double curly braces {{}}. Moreover, built-in helpers like “pascalCase” allow the formatting of variables.

const {{pascalCase name}} = () => {
  return <div>{{pascalCase name}} Component</div>;
};

export default {{pascalCase name}};

In addition to “pascalCase,” you can also use:

• “camelCase”
• “snakeCase”
• “lowerCase”

Check out the complete list here: Plop.js Built-in Helpers.

Running the Generator Using Plop

After setting everything up, we are now ready to run our generator! There are two ways to do this:

1. Using CLI Command

2. Using VS Code Script Runner

Alternatively, you can open the package.json file, hover over “generate script,” and click “Run Script” in your editor.

Generating Our First Component with Plop

Next, let’s create our first real component, “Button,” using the plop command npm run generate (with either of the two options mentioned above). After you run the command, the terminal will show prompts as mentioned in the plopfile.js

This will prompt you with questions as per plopfile.js, such as:

1. What is this component’s name? → Button
2. HTML element (default is div)? → button

Once you provide the inputs (refer to the above screenshot to understand better), the component gets created at the specified location, and you will see a success message in the terminal.

Final Thoughts

As you can see, Plop.js simplifies component creation by automating file generation and reducing repetitive tasks. By setting up structured templates, we ensure consistency and boost productivity across the project.

In the upcoming blog, we will explore:

• Other key Plop.js methods (beyond “setGenerator”)
• Built-in and custom actions
• More practical examples

So, stay tuned!

We may all have encountered this situation countless times in our projects—copying and pasting files just to create a new component, page, or service. Unfortunately, this slows us down and hampers our productivity by introducing errors into the workflow. However, there’s a solution! Plop.js is the answer to this problem, as it automates these tasks and allows us to focus on writing great code.

What is Plop.js?

Plop.js is a simple yet powerful scaffolding tool—in other words, a micro-generator framework—that helps us automate repetitive coding tasks for projects. It saves time, reduces errors, and standardizes code structures. Moreover, it ensures uniformity across files, making life easier for the entire team.

Highlight Features

• First and foremost, Plop.js is a template-based file generator.
• Additionally, it is an interactive CLI, enabling a smoother user experience.
• Lastly, you can achieve extensibility through custom actions.

Installation of Plop.js

Plop.js can be installed in any of your projects. To illustrate this, let’s take an example of a Next.js project.

Step 1: Create a Next.js Project

To begin with, create a Next.js project using the following command:

As a result, the above CLI command will prompt you with further questions for setting up your Next.js project.
(Select answers as per your requirement):

• What is your project named? my-app
• Would you like to use TypeScript? No / Yes
• Would you like to use ESLint? No / Yes
• Would you like to use Tailwind CSS? No / Yes
• Would you like your code inside a ‘src/’=’ directory? No / Yes
• Would you like to use App Router? (recommended) No / Yes
• Would you like to use Turbopack for ‘next dev’? No / Yes
• Would you like to customize the import alias (‘@/*’ by default)? No / Yes

Step 2: Install Plop.js

Once your Next.js project is set up, navigate to the project folder and install Plop.js using the command below:

This Installation Generates 3 Key Files

1. A node_modules folder for all your libraries, packages, and third-party code.
2. A package.json file will give you a starting point for your scripts.
3. A package-lock.json file will lock down the versions for each package.
   

In addition to this, installing Plop globally is optional but recommended:

Step 3: Create plopfile.js

Next, create a plopfile.js at the root of your project. Below is a very basic example of plopfile.js

module.exports = function (plop) {
  plop.setGenerator("basics", {
    description: "My first Plop generator",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "What is the name of your component?",
      },
    ],
    actions: [
      {
        type: "add",
        path: "./components/{{pascalCase name}}.js",
        templateFile: "templates/component.hbs",
      },
    ],
  });
};

Breaking Down the Code

• The “setGenerator” creates a plop generator. Here, plopfile.js has a single generator called “basics.”
• The “description,” as the name suggests, describes the purpose of the generator.
• The “prompts” is an array of prompts. This could be added to your created generator.
• The “actions” take the user’s information to each prompt. It is an array of where each action is an object. This is an important step and requires creating some templates.

Step 4: Add a Script to package.json

Before running Plop, add the following script (highlighted in the screenshot below) to package.json.

Step 5: Run plop

Lastly, run plop through the CLI command “npm run generate.”

Now, Plop will execute and guide you through the component creation process!

What’s Next?

So far, we’ve covered the introduction and installation of Plop.js and a basic skeleton for plopfile.js.
In the next part, Plop.js Template Creation, we will explore plopfile.js more thoroughly, replace the skeleton code with working code, and create our first real template. Stay tuned!