Getting Started

Overview

hyperfrontend is a hybrid micro-frontend pattern that enables building composable web applications. This guide will walk you through installation and creating your first feature.

First, ensure you have an Nx workspace set up.

Then add the hyperfrontend features plugin:

1

npx nx add @hyperfrontend/features

This will automatically install the @hyperfrontend/window-messages package and configure your workspace.

Creating a Feature

Initialize an existing application as a hyperfrontend feature:

1

npx nx g @hyperfrontend/features:init

The generator will prompt you for:

• Which project to target
• Where to store the feature configuration and contracts

Consuming a Feature

Add a feature to a host application:

1

npx nx g @hyperfrontend/features:add

The generator will prompt you for:

• The feature name
• Which host project to add it to

The plugin automatically sets up the consumption pattern that works naturally with your chosen framework.

Testing Your Feature

Run the playground host to see how your feature loads:

1

npx nx serve <your-feature-name>

This launches a development environment where you can debug and interact with your feature in isolation.

What You’ll Learn

• How to initialize a project as a hyperfrontend feature
• How to consume features in host applications
• How to test and debug your features

Next Steps