Skip to content

Installation

You get a micro-frontend on this SDK in one of two ways: scaffold a new one with the devedge CLI, or add the packages to a project you already have. Scaffolding is the fastest path and is the recommended starting point.

Prerequisites

  • Node 22 and pnpm. The SDK is a pnpm workspace and its packages build with tsc.
  • The de CLI if you want to scaffold. de ufe new ships in the devedge CLI, the same tool that scaffolds backend services with de new service.

Scaffold a micro-frontend

Run de ufe new with a name for the micro-frontend:

de ufe new my-ufe

de ufe new generates an Angular and single-spa micro-frontend already wired to the SDK packages: a validated nav contribution, a session-aware shell, and the bearer interceptor. You do not wire the seams by hand — the scaffold does it, and the tutorial walks through the code it produces.

Add the packages to an existing project

The SDK is five packages. You install the ones your project uses.

PackagePurposeRuntime dependencies
@infobloxopen/devedge-ufe-coreThe mechanism-only contract: lifecycle, nav-group validation, session seam, manifest.none
@infobloxopen/devedge-ufe-oidcA generic OIDC (auth-code with PKCE) session provider.oidc-client-ts
@infobloxopen/devedge-ufe-single-spaThe single-spa lifecycle adapter and createShell.single-spa
@infobloxopen/devedge-ufe-angularAngular glue: session provider, bearer interceptor.peer @angular/*, rxjs
@infobloxopen/devedge-ufe-dev-loopThe diagnose checklist and the devedge-ufe doctor CLI.import-map-overrides
The packages are not yet published to npm. Install them from a local checkout of the SDK rather than from the registry. Reference each package by a workspace or file: link — for example "@infobloxopen/devedge-ufe-core": "file:../devedge-ufe-sdk/packages/core" in your package.json, or a pnpm workspace entry that points at the checkout. A future release will publish the packages to npm; until then, npm install @infobloxopen/devedge-ufe-core does not resolve.

Build the SDK packages once in your checkout so the file: links resolve to built output:

pnpm install
pnpm -r --filter './packages/*' run build

Next steps