Dora: An Open‑Source Taro Mini‑Program Micro‑Frontend Framework

Dora is an open‑source micro‑frontend integration framework created by Hellobike for Taro mini‑programs. It enables splitting multi‑page business logic into separate sub‑applications, compiling and communicating them together, thereby decoupling business lines, reducing overall complexity, and simplifying multi‑team collaboration.

The project is hosted at https://github.com/hellof2e/dora (stars are welcome).

Why Dora was built

Traditional multi‑repository collaboration tools such as git submodule expose low‑level details that are hard for business developers to understand. Lerna works well for library maintenance but not for business‑line scenarios. Dora offers a simple, clear, and extensible solution with built‑in checks (e.g., master branch validation) that fit business‑line workflows.

Concept definition

Dora manages sub‑applications through a config.json placed in the root of the host (parent) app. Each sub‑app entry defines: subAppName – name of the sub‑business path – location of the sub‑repo within the monorepo tag – git hash repository – repository URL

Example config.json:

{
  "apps": {
    "doraSubappExample": {
      "configPath": "./src/doraSubappExample/config.ts",
      "path": "./src",
      "repository": "[email protected]:gjc9620/dora-subapp-example.git",
      "subAppName": "doraSubappExample",
      "tag": "1.0.0-release/1.0.0-1689675708545"
    }
  }
}

Basic usage

Install Dora globally: $ npm i -g @hellobikefe/dora Show help:

Options:
  -V, --version     output the version number
  -h, --help        display help for command
Commands:
  publish           发布子应用代码至父应用
  update [options]  更新子应用
  help [command]    display help for command

Integration steps

1. Add config.json (or config.ts/js) in both parent and sub‑apps to describe routes and events.

2. In the sub‑app’s package.json, add a subAppName field:

{
  "version": "1.0.0",
  "subAppName": "doraSubappExample"
}

3. Install the Babel macro plugin for custom compilation: npm i [email protected] Configure the plugin (example):

const macros = (chain) => chain.merge({
  module : {
    rule : {
      myloader : {
        test : /(node_modules|src).*\.(ts|tsx|js|jsx)$/,
        use : [{
          loader : 'babel-loader',
          options : {
            plugins : [
              'macros',
            ],
          },
        }],
      },
    },
  },
});
webpackChain(chain) {
  macros(chain)
},

4. Use the context bridge to let parent and child communicate.

Parent side (set context):

import useCtx from 'dora/export/useCtx';

setCtx({
  moduleA: () => {
    return '我来自父app';
  }
});

Child side (use context):

<View className='index'>
  我是subapp的页面
  <View>{useCtx().moduleA()}</View>
</View>

Event communication

Dora provides an event system to decouple business lines.

componentDidShow () {
  doraEvent.emit({
    eventName : 'app:componentDidShow',
    args : {},
  });
}

Define handlers in event:

event : {
  'app:componentDidShow' : (arg) => {
    console.log('subapp 启动');
    console.log('持续检测用户当前订单是否偏离导航，触发安全机制。');
  },
  'app:componentDidHide' : (arg) => {
    console.log('subapp 启动');
    console.log('推入后台暂停检测');
  },
},

Version control

Dora leverages Git tags. Each publish creates a tag recorded in config.json. The update command aligns all sub‑apps to the tag versions defined in the parent.

Team workflow

The recommended process is to clone sub‑repositories to the desired location, run dora publish from the sub‑app root, and ensure push permissions for both parent and child repos. Example repositories for reference:

Parent app demo

Sub‑app demo

Overall, Dora provides a lightweight, extensible solution for building and maintaining micro‑frontend architectures in Taro mini‑program ecosystems.