Getting Started§
Set up hyperfrontend and create your first micro-frontend feature in minutes.
First, check this is the right fitTen minutes now beats a rewrite later. Answer a few questions about your systems and teams to find out whether HyperFrontend suits your situation, and what fits better if it does not.Prerequisites§
Before you begin, ensure you have:
- Node.js 18+ and npm/yarn/pnpm
- An existing web application you want to convert into a feature (or a fresh project)
Installation§
Install the package:
npm install @hyperfrontend/featuresIt bundles @hyperfrontend/nexus and its other direct dependencies, so your app takes on no transitive install burden.
Creating a Feature§
Initialize an existing application as a hyperfrontend feature:
npx @hyperfrontend/features initWhat happens: The CLI scaffolds the hostee glue module, the feature side of the boundary, into your app and wires it into the entry file, alongside a feature.config.* file and a contract that defines the messages your feature can send and receive.
Building a Shell§
Generate a self-contained shell package that any host can install:
npx @hyperfrontend/features build --protocol v2The CLI generates the shell package, inlines the contract, bundles every dependency into it, and packs a publishable tarball with typed bindings. The host installs one package and takes on no transitive deps. The security envelope is an explicit choice (--protocol v1 or --protocol v2, or a protocol entry in the feature config), and the build bakes it in as the shell's default.
Testing Your Feature§
Serve your apps with the debug UI to see how your feature loads:
npx @hyperfrontend/features devThis starts one static server per app plus an in-browser debug UI for inspecting host/hostee message traffic, display modes, and the security envelope.