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?
- Install it from npm
- 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.
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
andactions
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
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 👣
Top comments (4)
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?
I think maybe it is just a one of the features in that tools, a tool can be bigger as time goes by
Thanks for your response.
You're right, this is just one of the awesome features Plop holds
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.