Frontend Workflow — Scaffolding

In pursuit of DRY (Don’t Repeat Yourself) and productivity, there are many things we can do with frontend infrastructure: UI component libraries, custom ESLint rules, shared ESLint configurations, shared CI configurations, etc. These mechanisms can improve frontend work efficiency to some extent, but there’s still one link that needs optimization. In work, we don’t just have a single project; setting up configurations from scratch for each project is actually very inefficient. For this reason, there are many scaffolding tools in the industry, such as create-react-app and JHipster, but third-party tools are often either too simple or too bloated. It’s more convenient to build scaffolding based on your actual needs. So Yeoman comes into play.

What does Yeoman do? THE WEB’S SCAFFOLDING TOOL FOR MODERN WEBAPPS.

Yes, that’s exactly what we need. Let’s get started.

Configuration Steps

1. Create a generator project, for example, called generator-react-web (note the fixed prefix generator-).
2. Create a template project, for example, here I only created a react-web-template.
3. Configure the generator project, mainly to support user-selected configuration options.
4. Use npm link to map local modules for easy testing.
5. After everything is okay, publish the package; here I used the npm public registry.
6. After success, you can happily start new projects:

   $ npm install -g generator-react-web.
   $ npm install -g @stacker/generator-react-web
   $ yo @stacker/react-web
   

For specific configurations, refer to the official website and my code example. I won’t paste them here.

Notes

1. The design I personally recommend is to maintain the generator in a separate repository to provide users with various interactive settings and continuously enrich and improve requirements.
2. Template code is maintained in a separate repository, making it cleaner.
3. If you don’t want to manage multiple repositories, you can also host them in the generator project.

Final Thoughts

At this step, we can control and unify more aspects of a project. What else can we do? Yes, for example, creating a custom CLI. Let’s do it when the need arises…