Combined Applications

Thanks to the Chainlet Development Platform, multiple Chainlets can be combined together. Each Chainlet acts as both an application and a component—they can be combined by others, or serve as hosts that combine additional Chainlets.

In a combined Chainlet, each component is its own service. Through unified configuration and UI, the system feels like a single complete application.

---

Starting the Applications

Main Application

bash

make init   # install dependencies at project root
cd chainlets/main-app
npm run dev

Child Applications

bash

cd chainlets/vue-static
npm run dev:child

cd chainlets/express-api
npm run dev:child

On your local chainlet-server, you’ll see the main application (e.g., react-static) with child apps (vue-static, express-api) mounted beneath it.

Updating Navigation

Navigation for the combined app will be managed in chainlet.yml:

yaml

navigation:
  - title:
      en: Vue page
      zh: Vue 页面
    link: /composite-demo-vue-static

For a unified configuration and UI, use @chainlet/ui-react:

• Install it in the main application.

• Add Header and Footer components to the layout.

Example layout (/chainlets/react-static/src/components/layout.jsx):

jsx

import Header from '@chainlet/ui-react/lib/Header';
import Footer from '@chainlet/ui-react/lib/Footer';

function Layout({ children }) {
  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  );
}

This ensures all child apps share a consistent navigation and look-and-feel.

---

Deploying a Chainlet Monorepo

When development is complete:

Deploy the main app

bash

cd chainlets/main-app
npm run deploy

Deploy child apps

bash

cd chainlets/vue-static
npm run deploy:child

Each Chainlet in the monorepo will come with preconfigured npm scripts for packaging and deployment.