Web Stack IDE (Node.js)

Build modern web apps with React, Angular, Vite, and Node.js — with live browser preview.

What's Inside

Tool	Version	Purpose
Node.js	20 LTS	JavaScript runtime
npm / yarn	Latest	Package managers
TypeScript	Latest	Type-safe JavaScript
Vite	Latest	Fast build tool (React, Vue, Svelte)
Angular CLI	Latest	Angular framework CLI
create-react-app	Latest	React project scaffolding
create-vite	Latest	Vite project scaffolding
serve	Latest	Static file server with correct MIME types
ESLint / Prettier	VS Code extensions	Linting and formatting

Quick Start

# Create a React app with Vite
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

# Build and preview your app
web-preview

# Or use Vite dev server with HMR (advanced)
vite-dev

Helper Commands

Command	What it does
`web-preview`	Build + serve your app with live browser preview
`web-preview 3000`	Same, but on a custom port (default: 5173)
`vite-dev`	Start Vite dev server with hot module reload
`preview`	Show the app preview URL

How web-preview Works

web-preview is the main command students use. It:

Runs npm run build
Auto-detects the output folder (dist/, build/, or .next/)
For Angular, finds the nested dist/<name>/browser/ folder
Serves the build with correct MIME types on port 5173
Shows the preview URL to open in Simple Browser

web-preview
# ╔══════════════════════════════════════════════════════════╗
# ║  ✓ App is ready!                                        ║
# ║  /proxy/5173/                                           ║
# ║  Press F1 > type Simple Browser                         ║
# ╚══════════════════════════════════════════════════════════╝

Supported Frameworks

Framework	Create Command	Preview
React (Vite)	`npm create vite@latest my-app -- --template react-ts`	`web-preview`
React (CRA)	`npx create-react-app my-app --template typescript`	`web-preview`
Angular	`ng new my-app`	`web-preview`
Vue (Vite)	`npm create vite@latest my-app -- --template vue-ts`	`web-preview`
Svelte (Vite)	`npm create vite@latest my-app -- --template svelte-ts`	`web-preview`
Next.js	`npx create-next-app@latest my-app`	`web-preview`
Vanilla	`npm create vite@latest my-app -- --template vanilla-ts`	`web-preview`
Express API	Write your own `app.listen(port, '0.0.0.0')`	Custom port

Live Browser Preview (Split View)

To get a Firebase Studio / Bolt-like split view:

Run web-preview in the terminal
Press F1 → type Simple Browser → paste the URL shown in terminal
You now have code on the left, app preview on the right
After code changes, press Ctrl+C and run web-preview again

Or use the keyboard shortcut: Ctrl+Shift+B to build and preview automatically.

Express / Node.js Backend

For backend apps, make sure your server binds to 0.0.0.0:

// ✅ Correct — accessible through code-server proxy
app.listen(3000, '0.0.0.0', () => {
  console.log('Server running on port 3000');
});

// ❌ Wrong — only accessible inside the container
app.listen(3000, () => { ... });

Then access it at /proxy/3000/ in your browser.

Tips

Dev servers auto-bind to 0.0.0.0 — the HOST and VITE_HOST env vars are pre-set
Global npm packages go to ~/.npm-global — no sudo needed for npm install -g
web-preview is more reliable than vite-dev behind the code-server proxy
Use vite-dev only when you need hot module replacement during active development
Ports 3000, 4200, and 5173 are exposed for React, Angular, and Vite respectively

Security

Root access is restricted. Use sudo apt install <package> for system packages.
npm, npx, yarn, and ng are whitelisted for sudo access.
Node.js memory is capped at 4GB (NODE_OPTIONS="--max-old-space-size=4096").