Getting Started
Set up hyperfrontend and create your first micro-frontend feature in minutes.
Prerequisites
Before you begin, ensure you have:
- An Nx workspace set up (v17 or later recommended)
- Node.js 18+ and npm/yarn/pnpm
- An existing web application you want to convert into a feature (or a fresh project)
Installation
Add the hyperfrontend features plugin to your Nx workspace:
npx nx add @hyperfrontend/featuresThis automatically installs @hyperfrontend/nexus and configures your workspace.
Creating a Feature
Initialize an existing application as a hyperfrontend feature:
npx nx g @hyperfrontend/features:initThe generator will prompt you for:
- Which project to target
- Where to store the feature configuration and contracts
What happens: The generator adds a hyperfrontend.config.ts file to your project and creates contract schemas that define the messages your feature can send and receive.
Consuming a Feature
Add a feature to a host application:
npx nx g @hyperfrontend/features:addThe generator will prompt you for:
- The feature name
- Which host project to add it to
The plugin generates typed bindings from the feature's contracts and vanilla JavaScript integration code.
Testing Your Feature
Run the playground host to see how your feature loads:
npx nx serve <your-feature-name>This launches a development environment where you can debug and interact with your feature in isolation.