Mastering Eris: The Enterprise-Grade Frontend Scaffold for Scalable Projects

1. Background

Eris scaffolding is an enterprise-level frontend build and engineering tool developed by Yidianzixun's frontend team. Over a hundred applications have been created with Eris, serving both external and internal products. After two years of internal refactoring and optimization, it is now open-sourced for community collaboration.

2. Advantages of Eris

Common scaffolds like vue-cli, create-react-app, and dva-cli initialize projects quickly, but complex business scenarios and varied framework preferences require a customized enterprise scaffold. Eris abstracts the creation process into fixed stages and limited operations, unifying daily development and build‑deployment tasks. It adopts good ideas from traditional scaffolds while improving their shortcomings, offering flexible, fast, business‑oriented template construction.

3. Eris Commands

create : Create an application

start : Start the application

build : Build the application

delete_app : Delete an application

help : Show scaffold usage help

exit : Exit (supports Ctrl+C)

dev-tpl : Develop custom templates

4. Using Eris

4.1 Start

In production, the scaffold is fetched from a public npm registry or an internal private registry. sudo yarn global add eris-cli In development, link the eris command globally with yarn link and run yarn start to enable watch mode for live recompilation.

Running the eris command opens an interactive CLI where users select project stages as prompted.

4.2 create – Create Project

Template management is the core of project creation. Eris supports both git‑based and local templates.

4.2.1 Get Template from Git

Eris spawns a child process to clone the git repository and then parses the template.

4.2.2 Get Template Locally

The open‑source code includes two major template types: H5 templates and admin (backend) templates.

app-template-admin: React + Ant Design admin template

app-template-admin-vue: Vue2 + ant-design-vue admin template

app-template-h5: React H5 page template for simple showcase apps

app-template-h5-vue: Vue2 H5 page template

app-template-h5-vue3: Vue3 H5 page template

Admin templates allow theme selection (dark or light), defaulting to dark.

4.2.3 Template Parsing

During CLI interaction, answers from eris.json (e.g., {appId:'my-app', appName:'my-app', layout:'sidebar', theme:'dark'}) are rendered into the template using EJS.

4.3 start – Launch

Before launching, Eris checks the project path and whether dependencies are installed; if not, it installs them automatically and runs yarn start.

4.4 build – Package

Production information collected via inquirer (e.g., {appId:'my-app', buildEnv:'testing', command:'build'}) determines whether to build for testing or production, producing separate bundles per appId.

4.5 delete_app – Remove Project

Specify the appId to delete, then Eris removes the project files.

4.6 help – Usage Help

The commander library generates help documentation from configured descriptions, options, and sub‑commands, while also allowing custom help messages.

4.7 dev-tpl – Develop Custom Templates

Running npm run dev-tpl lets developers preview templates while editing. It uses node-watch to monitor file changes and triggers compilation to the dist directory.

5. Source Code

GitHub: https://github.com/cyphant-tech/eris

6. Conclusion

Thank you for reading. If you are interested in the Eris frontend scaffold, feel free to join the DingTalk or WeChat groups for further discussion.