Automatically generating files in your React/Next Js app

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.

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
2. After successful installation, you'll need to create two things
3. a file called plopFile.js: This is where you get to define the actions you want to carry out.
4. 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.

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.

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

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

Youtube video support.

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 👣