DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Automatically generating files in your React/Next Js app
Samuel Lucas
Samuel Lucas

Posted on

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 πŸ‘£

Oldest comments (4)

Collapse
 
fkranenburg profile image
Ferry Kranenburg

I was wondering. There are also IDE tools out there where it can generate your files for you with using templates, but for all kind of coding languages. But in my 20 year experience I never used it or needed something like this for starting my components.

Is there anyone using this on a daily basis and is really more productive with it?

Collapse
 
esareynor profile image
Rachman Esa

I think maybe it is just a one of the features in that tools, a tool can be bigger as time goes by

Collapse
 
sam_lukaa profile image
Samuel Lucas Author

Thanks for your response.
You're right, this is just one of the awesome features Plop holds

Collapse
 
sam_lukaa profile image
Samuel Lucas Author • Edited on

Thanks for your response.
Personally, I use this. Let me give a good use case.

There's a react application, you are to build components following a particular coding pattern for all the components, alongside the components you're to build, you're to create a story for everyone of them using storybook.

Yeah, it's simple to achieve but then it'll take your time to build out about 5 different components using the same format and structure, but done individually. That's where plop comes in.

Once you create a template for the process, all you've got to do is run the plop and it will generate the component and story for you within seconds, following the template you gave it.

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›