Get rid of Copy/Paste with Plop Js!
Tags: plopjs, javascript, nextjs, codegeneration
Published: 2024-02-15 21:32:31

Hello,

Almost all of us, while working on a project, are copy/pasting from the previous one while creating similar structures. While thinking if there is a fast way to do this, I came across [plop js](https://plopjs.com).

**Plop js** actually allows us to create the structures that we have previously created templates on cli via command. It does this in a very simple way. I can give **[hygen](https://www.hygen.io)** and [**yeoman**](https://yeoman.io/) as an alternative to **plop js**. I plan to write content about these libraries in the future.

## What Are the Conveniences It Provides Us?

- Saves time.
- Saves from writing repetitive code blocks and folder structures every time.
- Helps people working in the project to create structures in the same standard. So it provides code integrity.

Let’s reinforce them by writing a sample project. In our scenario, we will create a component whose name we will determine, a file where we determine the types contained in this component, and a style file with the help of a command.

Let’s create a **next js** project from scratch. project from scratch.

```bash
npx create-next-app@latest
```

First, let’s include **plop js** in our project with yarn.

```bash
yarn add plop -D
```

Those who use npm can use this.


```bash
npm install --save-dev plop
```

To run our Plop script from the terminal, let’s add it to our “package.json” file.


```json
{  
 ...
  "scripts": {    
    ...,
    "plop": "plop"
  },
  ...
}
```

It’s time to create our code template. To do this, we use [**handlebars js**](https://handlebarsjs.com), which allows us to create templates at a basic level. We create a folder called templates in the project home directory and add our template files inside.

`template/{{name}}.tsx.hbs`

```js
import { {{pascalCase name}}Props } from "./{{name}}";
import  "./{{name}}.css";

const {{name}} = ({ className="" }:{{pascalCase name}}Props) => {

  return (
    <div className={`{{name}} ${className}`}>
      {{name}} component
    </div>
  );
};

export default {{name}};
```
`template/{{name}}.ts.hbs`

```
export interface {{pascalCase name}}Props {
 className?: string;
}
```

`template/{{name}}.css.hbs`

```
.{{name}} {
  background-color: "#FF5733";
}
```

When we have completed our template files, we can create a file called “plopfile.js” in the main directory of our project.

`plopfile.js`

```js
module.exports = function (plop) {
  plop.setGenerator("component", {
    description: "this is a skeleton plopfile",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "Enter component name:"
      },
    ],
    actions: [
      {
        type: "addMany",
        destination: "app/components/{{camelCase name}}",
        templateFiles: "templates/*.hbs",
        base: "templates",
      },
    ]
  });
};
```

- **description:** Describes what the command does.
- **prompts:** The part where we define the questions asked to the user.
- **actions:** The part that defines the operation that the command will execute.
- **actions types:** is used to define the type of the function. For example, in our example, we create 3 files with a single command. We do this with the action of type `addMany`. The `add` type is used to add a single file. If we want to modify the file we use `modify`.

Finally, let’s run our command:

```
yarn plop
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2p06ypy63gespm2iglzk.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sf25nepddk60oi51cx9.png)

You can access the source codes of the sample project from **[this link](https://github.com/melihs/example-plopjs)**. 🔗

## Continue with content 🚀
You can access my other content by clicking **[this link](https://medium.com/@melihsahin)**. I would be very happy if you like and leave a comment 😇