RUNNABLE IMPLEMENTATIONS

Launch the same XYZ experience three ways

Start a sample from its command panel, then use Open local app. Each implementation preserves the same layout while changing frontend composition, hosting, and API compute boundaries.

Browser limitation: this microsite can open a localhost URL, but it cannot start processes on your computer. Run the listed command first. Local links use ports 5173, 5174, and 5175.

SWA shell + micro apps

Named slots, typed events, lazy feature bundles, and independently deployable frontend ownership boundaries.

Frontend4 Static Web Apps

Local port5173

Open local app →Source

Start command

npm --prefix samples/swa-shell-aca-apps install
npm --prefix samples/swa-shell-aca-apps run dev

Unified web app on ACA

One React state tree, one OCI image, non-root Nginx, ACA ingress, revisions, probes, and HTTP scaling.

Frontend1 ACA container

Local port5174

Open local app →Source

Start command

npm --prefix samples/aca-apps install
npm --prefix samples/aca-apps run dev

SWA shell + Flex Functions

Independent remote SWAs backed by three TypeScript Function Apps with separate FC1 scaling boundaries.

Compute3 Flex Function Apps

Local port5175

Open local app →Source

Start commands

# Full API demo prerequisites are in the sample README.
npm --prefix samples/swa-shell-functions-flex-apps install
npm --prefix samples/swa-shell-functions-flex-apps run dev

Compare architecture and operating trade-offs →