| 1 | # Web Dev Server
|
| 2 |
|
| 3 | Dev Server for web applications, ideal for buildless es module workflows. Optionally supports simple code transformations.
|
| 4 |
|
| 5 | - Efficient browser caching for fast reloads
|
| 6 | - Transform code on older browsers for compatibility
|
| 7 | - Resolve bare module imports for use in the browser (--node-resolve)
|
| 8 | - Auto-reload on file changes with the (--watch)
|
| 9 | - History API fallback for SPA routing (--app-index index.html)
|
| 10 | - Plugin and middleware API for extensions
|
| 11 | - Powered by [esbuild](/docs/dev-server/plugins/esbuild.md) and [rollup plugins](/docs/dev-server/plugins/rollup.md)
|
| 12 |
|
| 13 | > Web Dev server is the successor of [es-dev-server](https://www.npmjs.com/package/es-dev-server)
|
| 14 |
|
| 15 | See [our website](https://modern-web.dev/docs/dev-server/overview/) for full documentation.
|
| 16 |
|
| 17 | ## Installation
|
| 18 |
|
| 19 | Install the dev server:
|
| 20 |
|
| 21 | ```
|
| 22 | npm i --save-dev @web/dev-server
|
| 23 | ```
|
| 24 |
|
| 25 | ## Basic commands
|
| 26 |
|
| 27 | Start the dev server:
|
| 28 |
|
| 29 | ```
|
| 30 | web-dev-server --node-resolve --open
|
| 31 | wds --node-resolve --open
|
| 32 | ```
|
| 33 |
|
| 34 | Run in watch mode, reloading on file changes:
|
| 35 |
|
| 36 | ```
|
| 37 | web-dev-server --node-resolve --watch --open
|
| 38 | wds --node-resolve --watch --open
|
| 39 | ```
|
| 40 |
|
| 41 | Use history API fallback for SPA routing:
|
| 42 |
|
| 43 | ```
|
| 44 | web-dev-server --node-resolve --app-index demo/index.html --open
|
| 45 | wds --node-resolve --app-index demo/index.html --open
|
| 46 | ```
|
| 47 |
|
| 48 | Transform JS to a compatible syntax based on user agent:
|
| 49 |
|
| 50 | ```
|
| 51 | web-dev-server --node-resolve --open --esbuild-target auto
|
| 52 | wds --node-resolve --open --esbuild-target auto
|
| 53 | ```
|
| 54 |
|
| 55 | ## Example projects
|
| 56 |
|
| 57 | Check out the <a href="https://github.com/modernweb-dev/example-projects" target="_blank" rel="noopener noreferrer">example projects</a> for a fully integrated setup.
|
| 58 |
|
| 59 | ## Documentation
|
| 60 |
|
| 61 | See [our website](https://modern-web.dev/docs/dev-server/overview/) for full documentation.
|