Getting Started: Create a FynApp

Scaffold a FynApp with create-fynapp, run it next to other apps, and ship it. The quickest path from an empty folder to a working micro frontend.

Updated Sep 26, 2026 Edit this page on GitHub

create-fynapp provides two commands:

  • create-fynapp creates a React FynApp in the current directory.
  • cfa builds and checks an existing FynApp or installs the bundled coding-agent skills.

FynMesh: Website · Demo · Shell demo

Installation

Install the released commands globally with fyn:

fyn global add create-fynapp

If the commands are not on PATH, run fyn global setup-path and follow its shell instructions.

To work on this package in the FynMesh monorepo:

cd dev-tools/create-fynapp
fyn install
fyn run build

Create a FynApp

The app is created in the directory you run the command from. At the root of the FynMesh monorepo it is created under demo/ instead, which is where that repository keeps its FynApps.

create-fynapp --name my-app --framework react

--framework takes any framework name. Eight ship a complete template — react, react18, preact, vue, solid, svelte, marko, vanilla — and scaffold a working app for it. Any other name (qwik, lit, alpine, …) scaffolds the framework-generic skeleton: it installs, builds and passes cfa check as it stands, and comes with an AGENT-TODO.md checklist for the coding agent that converts it. Nothing is rejected for being unfamiliar.

Options:

  • --name, -n <string>: package and federation name.
  • --framework, -f <string>: any framework name; the eight above have templates.
  • --dir, -d <string>: directory to create (defaults to the name).
  • --skip-install: create files without running fyn install.

The command creates package.json, tsconfig.json, rollup.config.ts, and starter source files. Register a new demo app separately as described in agent/GUIDE.md.

Work with an existing FynApp

Run cfa from the FynApp directory, or pass --dir.

Build

cfa build
cfa build --watch
cfa build --dir demo/my-app

Options:

  • --dir, -d <string>: target directory (defaults to the current directory).
  • --watch, -w: rebuild when source files change.
  • --minify, -m: enable minified output.

Check build output

cfa check
cfa check --no-build

cfa check builds with the local Rollup binary, then checks for dist/fynapp-entry.js and a parseable dist/fynapp.manifest.json with the required identity and ./main expose. --no-build checks an existing dist/.

What a build emits

dist/ gets JSON as well as JavaScript, and the files are not interchangeable:

  • fynapp.manifest.json — this FynApp's public contract: identity, exposes, consume-shared / provide-shared, import-exposed, shared-providers. Other FynApps' builds read it off disk to discover who provides their shared modules, so build order matters — a dependency built after its consumer leaves the consumer's shared-providers empty.
  • __FYNAPP_MANIFEST__ inside fynapp-entry.js — the same manifest embedded in the entry, which is how the kernel reads it without an extra request. Middleware registration depends on it and has no fallback.
  • federation.json — build plumbing: expose-to-chunk mapping and share config. Optional; nothing at runtime needs it.
  • federation.bundles.json — only when the build's chunks were combined into one file: the map of which file carries which module, which a host reads to preload the file that will really be fetched.
  • __collected_shares.json — debug output. Nothing reads it.

Full reference, including every consumer: notes/BUILD-ARTIFACTS.md.

Install coding-agent skills

cfa install-skills
cfa install-skills --dir path/to/project
cfa install-skills --force

This opt-in command copies the bundled fynapp-modify and fynapp-migrate-kernel skills into <project>/.claude/skills/.

Authoring references

Development checks

fyn run build
fyn test

License

Apache-2.0