Quick start of your React application development with Yeoman

Nowadays create-react-app is commonly used to get started quickly developing React apps. But what if we need to add custom dependencies? We usually have a pool of dependencies that we use in each of our applications. For example redux or MobX for data storage and ESLint or TSLint for quality code. It is very tedious to add and customize them every time. In this article, I will show you how to create your own create-react-app using 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:

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:

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:

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:

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

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

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:

Create project directory and go there with command:

Then use generator with:

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

Front end developer, Moscow