# Your first microapp

Create an Astro shell with a React microapp and check your first mount using CLI 1.2.0.

<span id="qué-vas-a-construir"></span>

<span id="qué-vas-a-conseguir"></span>

<span class="section-anchor" id="section-1"></span>

## What you will achieve

You will open a page with a React application and test its counter. **WU will display that application inside the page.** We call this mounting a **microapp** or microfrontend.

The page hosting it is the **shell**. This walkthrough uses Astro for the shell and React for the microapp; you can choose other frameworks for your projects.

The folder containing both is a **workspace**. You will create it with the **CLI**, the terminal's `wu` command. The CLI prepares files and runs development tools; the `wu-framework` package is the **runtime** that mounts apps in the browser.

<span id="preparar-el-entorno"></span>

<span id="1-preparar-el-entorno"></span>

<span class="section-anchor" id="section-2"></span>

## 1. Prepare the environment

Use **Node 24** with npm. Open a terminal in the folder where you want to create the project and check your Node version:

```sh
node --version
npm --version
```

The first command should print `v24.x.x`. Install this walkthrough's CLI and check its version:

```sh
npm install --global @wu-framework/cli@1.2.0
wu --version
```

The final command should print `wu 1.2.0`. If `wu` is not found or you use another Node version, see [Installation and versions](/docs/cli/installation/) before continuing.

<span id="crear-el-shell-y-react"></span>

<span id="2-crear-el-shell-y-react"></span>

<span class="section-anchor" id="section-3"></span>

## 2. Create the shell and React

The `mi-plataforma` directory must not exist yet. Run:

```sh
wu create mi-plataforma --template react --shell astro
cd mi-plataforma
```

The command generates the Astro shell and a React microapp. These are the pieces you will use:

```text
mi-plataforma/
├── shell/                 # Página anfitriona Astro
├── mf-mi-plataforma/      # Microapp React
├── wu.config.json         # Configuración del workspace
└── package.json
```

The app is named `mi-plataforma`; its folder has the `mf-` prefix. **Run subsequent commands from this root**, where `wu.config.json` is located. The necessary configuration is already generated.

<span id="instalar-y-arrancar-en-desarrollo"></span>

<span id="3-instalar-y-arrancar"></span>

<span class="section-anchor" id="section-4"></span>

## 3. Install and start

Install dependencies and wait for successful completion:

```sh
wu install
```

Then start the server and leave the terminal open:

```sh
wu dev --native --port 3000 --no-open
```

When the terminal announces it is listening, open [http://127.0.0.1:3000](http://127.0.0.1:3000). In this mode, WU serves the shell and microapp on port 3000. The first startup also builds the Astro shell, so it may take longer.

<span id="4-comprobar-tu-primera-app"></span>

<span class="section-anchor" id="section-5"></span>

## 4. Check your first app

The CLI 1.2.0 template includes an initial screen and a counter:

1. On opening the page, look for **Overview**, **Welcome to WU**, and the `mi-plataforma` app.
2. Click **mi-plataforma** in navigation or its card. You should see **React**, the name `mi-plataforma`, and a counter under **Interactions**.
3. Click **+**: the value changes from **0** to **1**. Click **−** to return to **0**.
4. Click **Overview** to return to the initial screen.

**You have mounted a microapp with WU.** Seeing its name in navigation confirms registration; seeing the component and using its counter confirms it loaded and responds.

The React component you just used is in `mf-mi-plataforma/src/App.tsx`. The host page is in `shell/src/pages/index.astro`.

<span id="si-algo-no-aparece"></span>

<span class="section-anchor" id="section-6"></span>

## If something does not appear

| What happens | What to review |
| --- | --- |
| Port 3000 is occupied | Stop the other server or choose another port with `--port`; open the URL with that number. |
| `wu install` ends with an error | Resolve the first terminal error before starting the server. See [Diagnostics](/docs/cli/doctor/). |
| The page returns 404 | Check whether the initial Astro build failed. WU listening does not guarantee the shell was built. |
| The shell opens but React remains blank | Inspect the browser's first console or JavaScript-loading error. Continue with [Development and reload](/docs/cli/development/). |

<span id="leer-la-configuración-generada"></span>

<details>
<summary>More on versions, dependencies, and development mode</summary>

This recipe uses WU CLI **1.2.0** and **Node 24**. Project dependencies are resolved when you install them; the CLI version does not pin them. See [Versions and distribution](/sources/) for the versions covered by this documentation.

`wu install` combines shell and app dependencies, preserves custom root scripts and metadata, and runs the configured package manager. Declare each dependency in the package that uses it. See [dependencies and catalogs](/docs/cli/dependencies/) for shared ranges, conflicts and catalogs.

With `--native`, Astro builds the shell in `shell/dist/`; WU serves that output and rebuilds when sources change. This recipe does not start another Astro development server. Per-app ports in `wu.config.json` belong to the alternative `--vite` mode; microapp compilation still uses Node tools. [Compare both modes](/docs/cli/development/).

The difference between `wu.config.json`, `wu.json`, and `wu.init()` is explained in [What each file configures](/docs/guides/add-an-app/#qué-configura-cada-archivo).

</details>

<span id="seguir-aprendiendo"></span>

<span id="siguiente-paso"></span>

<span class="section-anchor" id="section-7"></span>

## Next step

<span id="añadir-vue"></span>
<span id="comprobar-las-dos-aplicaciones"></span>

Continue with [Adding a second app](/docs/guides/add-an-app/): keep this project and mount a Vue app alongside React.

<span id="construir-y-revisar-producción"></span>

If one app is enough for now, go directly to [Preparing production](/docs/guides/production/) to build and check its output.