Skip to Content
Examples06 · Dev Server

06 · Dev Server

A small task-list page served by 3va’s built-in dev server. Edit src/main.js, save, and the browser reloads.

Source: examples/06-dev-server

Run

cd examples/06-dev-server
3va dev --port 3000        # add --open to launch the browser
  3VA Dev Server
  Entry  : …/06-dev-server/src/main.js
  Output : …/06-dev-server/dist/bundle.js
  Public : public

  Local  : http://127.0.0.1:3000
  (!) Use --host to expose on the network
  Press Ctrl+C to stop.

Open http://localhost:3000 , click Add task a few times, then edit the greeting string in src/main.js. The terminal prints [dev] Rebuilt in 0ms and the page reloads.

How it works

The project is just an index.html with a module script:

index.html
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
  • index.html is served with two additions: a small process shim (process.env.NODE_ENV === "development") so libraries that check it don’t crash, and an HMR client that opens an EventSource on /__hmr.
  • Each module is transpiled when it’s requested (JS, TS, JSX), not bundled up front. Bare imports from node_modules are served through /@fs/<path>, and .css imports are injected as <style> tags.
  • On save, the server sends a reload event and the page does a full location.reload(). If the build fails, it sends an error event instead, and the page shows a full-screen overlay with the message.
  • The server also writes dist/bundle.js from the entry, so a bundle is always ready next to the dev session.

Things to keep in mind

  • The reload is a full page reload, not module hot replacement. Page state is lost on every save: the tasks you added disappear. Keep state you care about in localStorage or the URL while developing.
  • It binds to 127.0.0.1 by default. To test from a phone or another machine, use --host 0.0.0.0, and only on a network you trust.
  • A Content-Security-Policy header is sent by default: default-src 'self'; script-src 'self' 'unsafe-inline'; …; connect-src 'self' ws: wss:. Scripts, fonts or APIs from a CDN or another origin will be blocked in the browser console. Serve them locally, or use --no-csp while developing.
  • Static assets come from public/ (--public-dir to change it). This example has none. Files under the project root (like index.html and src/) are served directly.
  • Served modules contain absolute paths from your machine (in error messages of the module wrapper). That’s fine locally, but don’t expose the dev server publicly.
05 · npm Packages07 · Test Runner