Automatically generating files in your React/Next Js app
Tags: nextjs, react, webdev, javascript
Published: 2022-07-22 23:50:00

Creating files is actually one of the first steps in building a successful application, but having to create files that follow specific pattern, multiple times plus manually can become so tiring.😪

Hello my dear reader, how are you today?
Today, I'll be teaching you how to automate file creation in react/next js using what is called [Plop](https://www.npmjs.com/package/plop). 

What is Plop? It is a Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity.

At least, that's what they say it is, and that's really what it is.

To the main point, how do I use this awesome package?

1. Install it from [npm](https://www.npmjs.com/package/plop)
2. After successful installation, you'll need to create two things
- a file called **plopFile.js**: This is where you get to define the actions you want to carry out.
- a folder called **templates**: within this folder, you'll create a file that the **plopFile** will replicate, i.e the way you want the generated file to look like.

Let's talk about the **templates** folder. So, in this post I'll assume we are working within the components folder to create components(such as Button, Text, Inputs...) for our app.

The goal is to create the first component, **Button**.

Back to the templates folder, create another folder called **components**, and within this folder, create a file called **component.hbs**. Plop works with hbs files, that's why we have it that way.

Within the **component.hbs** file, let's create a skeleton of what we want each of our components to look like, as shown below.

```javascript
import React from 'react';

export const {{name}} = () => {
  return (
    <div>
      {{name}}
    </div>
  );
}
```
Every component file we create will follow this format.
You may be wondering, where the heck is `{{name}}` coming form, Lucas? 🧐

Let's see. `{{name}}` is the name we give our component when creating it, such as Button, Text..., but then where are we setting it?

That's where the **plopFile.js** comes in. Let's head there now.

I assume you're now within the file.
- A plopfile starts its life as a node module that creates a function which accepts the plop object as its first parameter.
- The plop object exposes the plop API object which contains the `setGenerator(name, config)` function. This is the function that you use to (wait for it) create a generator for this plopfile. When plop is run from the terminal in this directory (or any sub-directory), a list of these generators will be displayed. In our case, let's change the name to components, since we'll be working with components files.
- The config is where the `description`, `prompts` and `actions` go. What are they?🤔
**description**: a simple description of what this generator does
**prompts**: a custom user interaction function for command prompt, where you ask questions such as what component you want to create.
**actions**: as its name implies, it's the actions folder where you define in which folder you want the component created, the format to follow(templates/components/component) and other interesting things.
- finally you export the function created.

Let's see it in action.

```javascript
const config = (plop) => {
  plop.setGenerator('components', {
    description: 'A component generator for the app',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'Enter component name',
      },
    ],
    actions: [
      {
        type: 'add',
        path: 'components/{{pascalCase name}}/{{pascalCase name}}.jsx',
        templateFile: 'templates/components/component.hbs',
      },
    ],
  });
};

module.exports = config;
```

Within the `prompts`, you'll notice we are setting the value of name to name, and that is what we got the `name` within the `templates/components/component` from. It could be anything, could be `name: something` or `name: another_thing`, just about anything.

Within the actions, there are various `type` of actions that could be carried out such as append, modify, addMany..., but we'll be using `add` today for the purpose of this post, to add a file to a folder.

The path describes what path we want the file created. You'll also notice that we have this line `{{pascalCase name}}`, basically we have various case modifiers such as `camelCase`, `pascalCase`, `lowerCase` among others so we are basically telling `plop` to use the `pascalCase` for the file we are creating, and the name is gotten from `name: name`.

The `templateFile` is where we navigate to the format which we want our file to be created.

To run what we just created, simlpy run 
```javascript
yarn run plop
``` 
in your terminal.

Works like magic 🧞.

Congratulations, you have completed the mission.

Thanks for taking your time to read through this. 

Let me know in the comment section below if you found this useful or if you knew about this before now or how productive you think this will make you be.

Links below to useful resources:
[Plop documentation](https://plopjs.com/documentation/#getting-started)

[Youtube video support] (https://www.youtube.com/watch?v=NKW65IVwm6k).

In the next post, I'll be showing you advanced features of Plop such as a case where you can append to a file. 

Bye for now 👣