Preparing production

Reviewing what you will publish

In development you tested source files. Now you will generate the files delivered by your host and check those built versions in the browser.

Continue from the mi-plataforma/ root from Your first microapp. If you completed Adding a second app, you will also build Vue. The same commands work with one or two apps.

1. Build the workspace

Stop the development server with Ctrl+C and run:

wu build

Wait for successful completion. WU collects the Astro shell and microapp builds in dist/ at the workspace root. This folder contains the complete output; shell/dist/ contains only the shell.

With React and Vue, check that dist/index.html exists and there is a folder for each microapp:

dist/
├── index.html
├── apps.json
├── wu-manifest.json
├── assets/...
├── mf-mi-plataforma/
│   ├── wu.json
│   └── assets/...
└── mf-inspector/
    ├── wu.json
    └── assets/...

If you only created React, there will be no mf-inspector/ folder. The build may add other files, including HTTP policies. Each wu.json points to its app’s built entrypoints.

If the command fails, resolve the first error before continuing. A dist/ folder from an earlier build may still exist; seeing it on disk does not confirm that the latest build succeeded.

2. Serve the built output

From the same root, run:

wu serve 4100

Leave the terminal open and visit http://127.0.0.1:4100. 4100 is the port for this review. If occupied, choose another number and open the corresponding URL.

wu serve delivers files from dist/. If you change source files, run wu build again to include those changes in the review.

3. Check apps in production

1. Check Overview, Welcome to WU, and the app names you created.
2. Open mi-plataforma and verify React, the app name, and its counter: + changes 0 → 1, and − returns to 0.
3. If you added Vue, open inspector and repeat the counter check.
4. Return to Overview, reload the page, and open the apps again.
5. Check browser developer tools for JavaScript-loading errors or 404 responses.

This checks that the shell finds the built apps and their components work. If development worked but an app is blank here, inspect its asset paths and manifest; Building for production explains how to inspect that output.

When finished, stop the server with Ctrl+C.

Publish and keep learning

The assembled contents of dist/ are the artifact to publish on your host. First, follow Serving and deploying to review routes, styles, and headers for the target environment. Testing on port 4100 validates this local output; also check the published URL after deployment.

wu doctor provides additional diagnostics. Its checks complement the interactions you just tested.

To add shared behavior to these same apps, continue with A counter between React and Vue. Then add A sum between applications, with client, provider, and permissions. Both recipes include every file and development/production checks. Running the examples also collects laboratories and Node examples.