Run the real stack

Chapter 09 compiles a model into a runtime that needs no install and no build step — which is what makes it start in ten seconds, and also what makes its interface a port of the real one rather than the real one. This chapter makes the other trade. It assembles the actual generated application, four hundred files of NestJS and TanStack Start, and hands them to a WebContainer: real Node.js compiled to WebAssembly, a real npm install, the real Vite build.

Everything before the install is the same code the command line runs. generateApplication and the WebAssembly overlay are imported unmodified; what changes is the filesystem beneath them, which is a Map in this tab instead of a disk. That is the whole trick, and it is why what boots below is the application appwithai generate would have written rather than something assembled to look like it.

This chapter needs the network, and a browser that allows cross-origin isolation. A WebContainer downloads its Node.js runtime from StackBlitz and then installs some two thousand packages from npm, so the first run is minutes rather than seconds and none of it works offline. Chapter 09 has neither requirement — if you want to see an application running quickly, start there.

How this differs from chapter 09

Both chapters compile the same model with the same compiler. What they do afterwards is the whole difference, and it is a real trade rather than one being a lesser version of the other.

How a static site gets cross-origin isolation

A WebContainer needs SharedArrayBuffer, and a browser only offers that to a document that is cross-origin isolated — Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp, both set on the document's own response. This site is served by GitHub Pages, which sends static files and lets nobody add a header, so on paper this chapter could not exist here.

A Service Worker settles it. guide/coi-sw.js sits between this page and the network; the page registers it on first load and reloads once, and the second time the document arrives it is the worker that answers and the worker that adds the two headers. It rewrites this one document and nothing else — chapter 09 and the rest of the site stay un-isolated, because isolation is a constraint rather than an upgrade and a page that does not need it only loses by having it.

What this does and does not prove

The assembly half is exercised on every commit: CI assembles the stack in a browser bundle and compares it, file by file, against what the command-line generator writes to disk. The one difference used to be the nine typefaces, which are binary and cannot travel in the JSON the templates arrive as; they are now shipped beside the templates and put back into the file tree before it is mounted, so what boots is the whole application rather than the whole application in a fallback font.

The boot half depends on infrastructure this site does not own. A WebContainer fetches its Node.js runtime from StackBlitz's hosts and its packages from npm, and neither is reachable from the environment this chapter was built in — so the install-and-start path has been written against the API's documented contract and verified up to the point where it leaves the browser. If it fails for you, the message under the button is the real one from the API rather than a guess, and everything before it — the model, the check, the four hundred files — has already happened in your tab and can be downloaded from chapter 09.