stackblitz-hello-world

# StackBlitz Hello World ## Overview Boot a WebContainer, mount a file system tree, install dependencies with npm, and start a dev server -- all running inside the browser tab. No backend server needed. ## Prerequisites - `@webcontainer/api` installed (see `stackblitz-install-auth`) - Cross-origin isolation headers configured - Modern browser (Chrome 90+, Firefox 90+, Safari 16.4+) ## Instructions ### Step 1: Define File System Tree ```typescript import { WebContainer, FileSystemTree } from '@webcontainer/api'; const files: FileSystemTree = { 'package.json': { file: { contents: JSON.stringify({ name: 'wc-hello', scripts: { start: 'node index.js', dev: 'nodemon index.js' }, dependencies: { express: '^4.18.0' }, }), }, }, 'index.js': { file: { contents: ` const express = require('express'); const app = express(); app.get('/', (req, res) => res.send('Hello from WebContainer!')); app.listen(3000, () => console.log('Server running on port 3000')); `.trim(), }, }, src: { directory: { 'utils.js': { file: { contents: 'module.exports = { greet: (n) => "Hello " + n };' } }, }, }, }; ``` ### Step 2: Boot and Mount ```typescript const wc = await WebContainer.boot(); await wc.mount(files); console.log('Files mounted. Installing dependencies...'); ``` ### Step 3: Install Dependencies ```typescript const installProcess = await wc.spawn('npm', ['install']); // Stream install output install...