Quick start of your React application development with Yeoman
By: Denis Voronin
Tags: Generator, React, Yeoman

Yeoman is a generator ecosystem. In this ecosystem, there are many different generators for different tasks, not only for creating web applications. You can find a ready-made generator or create your own. Let’s dwell on the second option.

First of all, we need an application template that we want to generate. For the test, you can take my ready-made template. Next, you need to install Yeoman with the command:

npm install -g yo

Then we can start creating our generator. First, let’s create and go to the directory of our generator. This directory must be named “generator-name” (where “name” is the name of your generator). By this name, Yeoman will search for a generator using the file system. We also need a “package.json” file in which we will configure the generator since it’s essentially a Node.js module.

The “name” property must start with the “generator-” prefix. The keywords property must contain “yeoman-generator” and the repo must have a description to be indexed by Yeoman generators page. The “files” property should contain an array of files and directories that your generator uses. Yeoman uses a file tree to generate the template. One generator can have multiple templates, for example:

├───package.json └───generators/ ├───app/ └───templates/ └───template/ └───index.js └───router/ └───templates/ └───template/ └───index.js

The generator should be in the “app” directory by default and can be started with the command — “yo name”, where «name» is the name of your generator without a prefix. The rest of the generators can be started with the command — “yo name:subcommand”, where “subcommand” is the name of your other generator. In the example above, the generator will provide the “yo name” and “yo name: router” commands. Now let’s proceed directly to writing the generator.

For simplicity, Yeoman provides a basic generator from which you can inherit yours. In the generator’s “index.js” file, here’s how you extend the base generator:

var Generator = require('yeoman-generator'); module.exports = class extends Generator {};

You can override constructor functions or add your own functionality. The main thing to know is that the generator methods are called in a specific order.

Here is the order of calling methods:

initializing — Your initialization methods (checking the current state of the project, getting configurations, etc.). prompting — Where you prompt users for options (where you’d call this.prompt()). configuring — Saving configurations and configure the project (creating .editorconfig files and other metadata files). default — If the method name doesn’t match a priority, it will be pushed to this group. writing — Where you write the generator specific files (routes, controllers, etc). conflicts — Where conflicts are handled (used internally). install — Where installations are run (npm, bower). end — Called last, cleanup, etc.

Let’s start in order. Install the dependencies our generator will need.

npm i inquirer-npm-name lodash.merge parse-author validate-npm-package-name

Now we will write an initialization method where we will define the default values for the manifest of the node.js module.

Next, we will request information about the application that we want to generate (title, description, author’s name, and mail). So let’s define the prompting method.

As you noticed, here we checked the name of the module. Now comes the fun part. We need to generate our template, in the current example I used my react-app-template. Yes, we need a writing method.

Finally, we need to install the dependencies for the generated template. For this, we will use the installation method.

To create your own template, you only need to override these methods, but if you have a desire or need for additional customization, you can read the full Yeoman documentation.

Now let’s use our generator. To do this, install the generator globally, being in its directory, run the command:

npm link

Create project directory and go there with command:

mkdir <project_directory> && cd $_

Then use generator with:

yo react-app

The complete generator code can be viewed on my Github page. Thanks for reading!