✦ Preact Node Micro Container

A full Node.js environment and IDE running entirely inside your browser tab using WebContainers.

---

✨ Highlights

• In-Browser OS: Boots a micro-operating system inside the browser using StackBlitz's @webcontainer/api.
• Real Node.js: Runs a genuine Node.js runtime locally. You can install npm packages, run servers, and execute build scripts without any backend infrastructure.
• Integrated IDE Environment: Features a 3-pane layout containing a code editor, a fully functional terminal (xterm.js), and a live browser preview iframe.
• Auto-Reloading: The demo comes pre-configured with Express and Nodemon. Editing and saving the code will instantly restart the internal server and reflect in the preview.

🧱 Project Structure

src/
|-- main.tsx           # Entry point and global styling wrapper
`-- app.tsx            # WebContainer boot logic, editor state, xterm integration

🛠️ Tech Stack

• Preact 10 with Vite 6
• @webcontainer/api for the browser-based Node.js runtime
• xterm & @xterm/addon-fit for the terminal interface
• Tailwind CSS 4 for the IDE layout styling
• lucide-preact for iconography

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🧪 Testing the Container

1. Launch the application. The terminal will show the boot process and automatically run npm install for the pre-mounted package.json.
2. Once the status says "Ready", click the "Start Server" button in the header.
3. The terminal will show Nodemon starting the Express server.
4. The internal URL (e.g., https://...webcontainer-api.io) will appear in the preview address bar, and the iframe will load the result ("Hello from WebContainer Node.js API! 🚀").
5. Edit the text inside the code editor pane, then click "Save (Auto-restart)". Watch the terminal restart the server, and refresh the preview to see your changes!

🔌 Extension Notes & Nuances

• Preview URLs & External Tabs: The generated server URL (e.g., https://<hash>.webcontainer-api.io) is designed to work seamlessly within the embedded <iframe> in the IDE. If you click the "Open in new tab" globe icon, StackBlitz may prompt you to "Connect to Project". This is expected security behavior due to Cross-Origin isolation and Third-Party Cookie blocking. The external link button is left in the UI as a foundation for future enhancements (e.g., if you decide to implement a robust Service Worker bridging strategy).
• Cross-Origin Isolation: Like FFmpeg, WebContainers require SharedArrayBuffer and strict security headers (Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin). This is handled in vite.config.ts and vercel.json.
• Browser Support: WebContainers require modern browsers based on Chromium (Chrome, Edge, Brave) or Firefox. Safari support is historically limited due to differing implementations of WASM and SharedArrayBuffer.
• Extending the IDE: For a production-ready application, replace the <textarea> with a robust code editor like Monaco Editor (VS Code's core) or CodeMirror for syntax highlighting, autocomplete, and file-tree management.

🧪 Build & Checks

npm run build
npm run preview

🌐 Vercel Deployment

The repository includes a highly optimized vercel.json for Vite static deployment, including the mandatory security headers:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        }
      ]
    }
  ]
}

📄 License

MIT License. See LICENSE.