Automate actions in FrontEnd projects creating an interactive CLI with PlopJS

How we automated some tasks by creating an interactive CLI with code generators

10 Jun 2024

11 snippets

28 mins

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Key Points

In this article I'll briefly describe:

how to create CLI generators, useful in (not only ) FrontEnd projects

Automate repetitive tasks

Simplify the creation and the copy of files and folders

# Introduction

Currently this site, learnbydo.ing manages articles via markdown. Every time we create a new article or a new lesson for our books we have to create a new folder with a page.mdx file, create an opengraph image and several other repetitive operations.

NextJs , the technology we have choosen for this site, uses a router based of file system, so the folder name also represents the route path of the article, and in our scenario it should be composed by:

the date of the article (24-06-10)
a dash (-)
the title of the post in "kebab-case" format: (automate-actions-in-frontend-project-with-plop)

The result is the link you're navigating right now: https://learnbydo.ing/diary/2024-06-10-automate-actions-in-frontend-project-with-plop

Since the creation of our CMS will take a few more months, we needed a strategy to speed up the creation of articles and lessons and, taking inspiration from Angular generators , we thought of creating a simple CLI that will allow us to speed up the process.

So, here you can see a short video (no audio) where I show you the first draft of the CLI to create a lesson for our books and a diary post, like this one:

This video does not have audio

In this article I will briefly explain how to do it

# Goal

As I said, to create this article I have to:

create a folder that contains in its name the date and title of the article in kebab case format
add a default "opengraph image" (which will then be manually replaced with the final one when it's done)
create an .mdx file that contains the article in markdown format (MDX to be accurate)
fill in the .mdx file with some metadata including title, date (which will be used for sorting), author and so on...

The result I would like to obtain is a simple CLI command that asks:

article title
author

and that does everything else automatically.

This is how the CLI diary action should looks like:

The creation of a lesson for our books involve more steps and it's more complicated but I'll show you the basics and you should be able to do it on your own

# How to create the CLI?

Now the question is: how to develop it?

Should we create everything from scratch? It may require a lot of time 🤔
Do we use a third-party library? And if so, which one?

Creating the CLI from scratch was the last resort so I decided to evaluate several libraries before:

• Prompt : I never used it before but seems interesting • Yeoman : I used this tool so many times years ago but the last commit in its repository was about 4 years ago... mmmm... • PlopJS : I used it in the past and it wasn't so bad • and several others...

After some research, testing and prototypes, PlopJS was the choice. Although the examples in its website are not always up to date and the documentation is fragmented between HandleBarsJS (the template system used for Plop templates) and inquiries.js (used for CLI and prompts), it seems that the tool has everything we need to get to the result in the shortest possible time.

So, let's go with Plop : )

# Plop.js

First install PlopJS as dev dependency of the NextJS project:

terminal

Then create a plopfile.js in the root of the project
Add a plop command to scripts in package.json:

package.json

And we are now ready to write our custom CLI `

plopfile.js skeleton

Here you can see the skeleton of the diary command, used to create a new article, just like what you're reading right now:

SWITCH LAYOUT

plopfile.js (skeleton)

Generator Skeleton

The structure of a command/generator is divided into these steps:

Assigning the command name (line 3)
Defining a list of questions / prompts (line 6)
A list of actions to be performed at the end (line 10)

and now you can run the command in your terminal:

terminal

plopfile.js Prompts

SWITCH LAYOUT

plopfile.js (prompts)

Now we'are define the questions you'll get after running the command:

plop diary

The script is very simple and I don't think I need to describe what it does. Shortly, when we run plop diary we will be asked the questions one after the other and our answers will be saved in the variables specified with the name property: postTitle and postAuthor.

It is interesting to note that the input type prompt simply requires a "string", that is title of the post, while the list type offers a convenient "select" you can use to select an item from a list:

Here you can see the result:

Actions

So far our script just asks some questions but it does nothing.

So, finally we can define the actions that will be performed at the end of the questions:

plopfile.js (actions)

First Action: generate file from template

The first action creates a new .mdx file in the defined path:

plopfile.js

The result should be exactly like the url of this article diary/2024-06-10-automate-actions-in-frontend-project-with-plop

the path is created getting the postTitle variables from the prompts -> name variable of the first question (see previous recipe)
we format the postTitle value using the kebabCase built-in helper that convert a text like My Super Article in my-super-article
But we also want add a date (in the format yyyy-MM-dd) before the postTitle so I have created a custom helper getSlugDate to generate it:

plopfile.js

The content of the mdx file is defined in the diary-post.hbs template. As you can see in the template below, some properties are wrapped by curly brackets and replaced by the values received by the prompts:

diary-post.hbs

Result:

Second Action: copy files

The second action simply copy the default opengraph-image.png we have in the root of our project (the image used when you share the article on social networks ) into the new article folder:

example.ts

And that's all!

There are several Built-In Actions , such as add, addMany and modify: this one is very cool if you want to update existing files adding content inside them.

Here is the complete file. Of course it's just a simplified version to give you an idea of how it works.

plopfile.js (actions)

# Conclusion

There is much more that can be done but I hope I have given you an interesting idea to integrate into your current and future projects.

Here you can see a preview of our CLI: