Tilted sphere with longitudinal stripes Modern Web Guides Docs Blog Toggle darkmode

Web Dev Server

Web Dev Server helps developing for the web, using native browser features like es modules. It is ideal for buildless workflows, and has a plugin architecture for light code transformations.

  • Efficient browser caching for fast reloads
  • Transform code on older browsers for compatibility
  • Resolve bare module imports for use in the browser (--node-resolve)
  • Auto-reload on file changes with the (--watch)
  • History API fallback for SPA routing (--app-index index.html)
  • Plugin and middleware API for extensions
  • Powered by esbuild and rollup plugins

Web Dev Server is the successor of es-dev-server

Installation

Install Web Dev Server:

npm i --save-dev @web/dev-server

Then add the following to the "scripts" section in package.json:

"start": "web-dev-server --node-resolve --open"

Or use the shorthand:

"start": "wds --node-resolve --open"

Note, the examples below assume an npm script is used.

Basic commands

Start the server:

web-dev-server --node-resolve --open
wds --node-resolve --open

Run in watch mode, reloading on file changes:

web-dev-server --node-resolve --watch --open
wds --node-resolve --watch --open

Use history API fallback for SPA routing:

web-dev-server --node-resolve --app-index demo/index.html --open
wds --node-resolve --app-index demo/index.html --open

Transform JS to a compatible syntax based on user agent:

web-dev-server --node-resolve --open --esbuild-target auto
wds --node-resolve --open --esbuild-target auto

Example projects

Check out the example projects for a fully integrated setup.