split-micro-app

Splits monorepo surfaces into standalone React Router SSR micro apps on Cloudflare Workers.

74|11|Updated Jul 4, 2024
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill split-micro-app-opensourceagi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: split-micro-app
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/apps/qwk-in-lobe/.agents/skills/split-micro-app
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill split-micro-app-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Extracting a surface from a large monorepo into a standalone micro app involves many failure-prone steps: SSR bundle bloat from main-source imports, CDN asset deployment, gateway routing, SEO metadata, and Docker packaging. This Skill records the decisions, landmines, and verification steps so the split works on the first deploy. ## Core Features & Use Cases - Micro App Splitting: Scaffold a React Router v8 SSR app on Cloudflare Workers with Vite 8, reusing main-source code via deep imports while cutting SSR bundle weight with stubs, client gates, and CDN shiki. - Deploy & Routing: Deploy hashed assets to R2/CDN with a stable prefix, deploy the worker with wrangler, and wire gateway (torii) targets, policies, and path rules with staging verification. - SSR, SEO & Docker: Configure loader data with SWR fallback, i18n narrowing, OG meta builders, and the five-link Docker chain for self-hosted SPA serving. - Use Case: When moving a route like /share out of the main SPA, follow the checklist to decide build ownership (OSS vs Cloud overlay), trace module imports, cut the worker bundle under the gzip budget, and verify with view-source before promoting. ## Quick Start Use the split-micro-app skill to split the /share route into a standalone React Router SSR micro app deployed on Cloudflare Workers.

Frequently Asked Questions about split-micro-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I split a monorepo route into a standalone micro app?

Scaffold an apps/<name> directory with React Router framework mode, a worker entry, and a Vite 8 config, then reuse main-source code through deep @/* imports. Follow the checklist covering build ownership, SSR weight cuts, CDN deploy, gateway rules, and Docker wiring.

How to reduce SSR bundle size in a Cloudflare Workers React Router app?

Trace heavy imports with the module-trace build flag, then apply client-only route gates, SSR stubs for store hubs, CDN-hosted shiki, and deep imports that bypass barrels. The documented share app cut SSR from 9.84MB to 1.78MB gzip using these techniques.

Does React Router v8 work with Cloudflare Workers and Vite 8?

Yes, @react-router/dev v8 with @cloudflare/vite-plugin on Vite 8 is officially compatible. Watch for v8 changes: load context needs RouterContextProvider, MetaArgs uses loaderData, and splat routes do not match bare /.

Why does my micro app dev server return 200 but load the wrong app?

The dev shell only works if a root-level index.<name>.html exists pointing at the app entry; otherwise Vite's HTML fallback answers 200 with the main SPA shell. Apps developed against their own Vite server carry no dev branch at all.

When should a micro app deploy from the overlay repo instead of OSS?

When the surface renders Cloud-only code, the repo whose code must be inside the artifact owns the build and deploy. OSS keeps stub seams for business modules, and the overlay build must use the vite-tsconfig-paths plugin instead of native tsconfig resolution.