[](https://github.com/navaris/appshell/actions/workflows/pipeline.yml)
# @appshell/loader
Dynamically load Appshell components for micro-frontends built with Appshell and Webpack Module federation.
Working examples can be found [here](https://github.com/navaris/appshell/tree/main/examples).
## Getting Started
To begin, you'll need to install `@appshell/loader`:
```console
npm install @appshell/loader
```
or
```console
yarn add @appshell/loader
```
or
```console
pnpm add @appshell/loader
```
The default export is the loader factory. It returns an async function that resolves a remote
key and loads the component behind it. It needs no configuration — the composition is read
from the document the registry served.
```ts
import componentLoader from '@appshell/loader';
const load = componentLoader();
const Component = load('MyModule/MyComponent');
render();
```
**Where does the composition come from?**
> The registry inlines it into the document it serves, as `window.__appshell_config__`.
## How a remote is resolved
The loader walks a chain of resolvers and uses the first one that answers:
| Resolver | Source | When it answers |
| ------------------ | ----------------------------------------- | -------------------------------------------------------------------------- |
| `inlineResolver` | `window.__appshell_config__` | The registry served the page and inlined the composition. No network call. |
| `registryResolver` | `GET /v1/applications/:id/remotes/:key` | The remote was activated after this page was served. |
A package's vars are delivered into the `@appshell/runtime` store immediately before
its remote is loaded, so they are in place before the package's modules evaluate. They
arrive already merged with the application's overrides, because the registry does that
merge server side — the browser applies nothing. The package reads them with `getVars()`
from [`@appshell/runtime/vars`](../runtime/README.md).
You can bypass the chain entirely, which is mainly useful for tests and embedders:
```ts
const load = componentLoader({ resolver: myResolver });
```
**Do you have any framework specific loaders?**
> See [@appshell/react](https://www.npmjs.com/package/@appshell/react) for a `React` loader.
---
_Source: https://npm.io/package/@appshell/loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
