Turn your React boilerplate -> CLI -> NPM package in 27 minutes (Part 1)

Get your food ready side by side in 27 minutes

So you want your boilerplate to make it into CLI(command line interface) .

If you don’t have your own ,there are tons of ‘How to create….’ articles available out there.You can also fork my repo from github and use it.

https://github.com/yash2code/react-personal-boilerplate

Why? What’s the need?

• You have been tired of copy/pasting or cloning everytime you are making a new project.
• You want to simplify this process by running a simple command.
• You can customize your workspace from choosing directory name to selecting dependencies for your project.

Requirements :

We will be using the Yeoman ecosystem to develop our own generator.

Yeoman is a tool to kickstart new projects, prescribing best practices and tools to help you stay productive.

Generators are nothing but the plugins to develop a CLI. They , at their core, are Node.js modules.

You like Generators , huh ?

So, we will be installing two modules globally.

npm i -g yo generator-generator

• yo command is used to run or scaffold the project/generator.
• generator-generator is for generating a new generator.

Creating a new generator :

Run the command yo generator

• Enter the name of your generator. Let name be myapp.
• You can fill other options if you want or keep them as default.
• A directory with name generator-myapp will be created for you.
• Open the folder in any text editor. If you are using VS Code, just do :

cd generator-myapp && code .

Setting up templates :

Now, we will need to copy all our boilerplate templates to generator-myapp/generators/app/templates folder.

Creating Interface :

It’s abiltiy to scaffold a project using user’s input is one of the awesome feature.

//Ask for user input
async prompting() { 
this.options = await this.prompt({
type: 'input',
name: 'name',
message: 'Your project name',
//Defaults to the project's folder name if the input is skipped
default: this.appname
});
}

We are using prompt method which runs asynchronously and returns a promise.

The name property of the prompt method is used to access the value of the input.

The message is instruction for user and default is the by default value of input if user doesn’t provide a name.

Scaffolding templates :

Let’s fill these blank spaces.

Next, lets write the logic for generating the project using template files which are in app/templates folder.

My folder structure is like this:

You can ofcourse have any type of structure .

We will be using writing method for all of the template logic in app/index.js .

writing() {
this.fs.copyTpl(
this.templatePath('_package.json'),
this.destinationPath(this.options.name + '/package.json'), {
name: this.options.name
}
);
this.fs.copy(
this.templatePath('_webpack.config.js'),
this.destinationPath(this.options.name + '/webpack.config.js')
);
this.fs.copy(
this.templatePath('_dist'),
this.destinationPath(this.options.name + '/dist')
);
.........
.........
}

Generators exposes all file methods on this.fs, which is an instance of mem-fs editor .

Two methods copy() and copyTpl() are used to copy the template files from our template path to destination path.

copy() method can be used when no bindings required to the template whereas copyTpl() method takes a third parameter which is binded to the template file after its generation.

Here I am passing the project’s name to the package.json file .

{
"name": "<%= name %>",
........
........
}

copyTpl is using ejs template syntax.

Install dependencies :

Fill up the node_modules

Now our final step is to install all the dependencies after completion of scaffolding.

install() {
this.installDependencies({
bower: false
})
}

The install method let us install dependencies in the generated directory.

It runs npm and bower, in sequence.

Time to test our generator :

Time for offroading

Before publishing it to npm registry , let’s test it on our local machine.

Just run npm link .

It will create symlink between local module’s directory and global module’s directory on your system.

You can read more about it here.

You can navigate to the path where you would like to generate your project and run yo myapp

Respond to the prompts you have created and see the magic.

You can now publish it to npm.

What next ?

Don’t jump! Wait till the next article.

Now , in the next post , we will run our generator without yo .

Till then, you can check my react16-cli package on npm.

Hint: It uses yeoman environment behind the scene.

Source :

The web's scaffolding tool for modern webapps | Yeoman

Thank you for reading!

Did you liked my article? If you got some time, I would be very grateful for any feedback.