Use Rspack with a development server that provides live reloading. This should be used for development only.
> `@rspack/dev-server` is based on `webpack-dev-server@5`
## Installation
First of all, install `@rspack/dev-server` and `@rspack/core` by your favorite package manager:
```bash
# npm
$ npm install @rspack/dev-server @rspack/core --save-dev
# yarn
$ yarn add @rspack/dev-server @rspack/core --dev
# pnpm
$ pnpm add @rspack/dev-server @rspack/core --save-dev
# bun
$ bun add @rspack/dev-server @rspack/core -D
```
## Usage
There are two recommended ways to use `@rspack/dev-server`:
### With the CLI
The easiest way to use it is with the [`@rspack/cli`](https://www.npmjs.com/package/@rspack/cli).
You can install it in your project by:
```bash
# npm
$ npm install @rspack/cli --save-dev
# yarn
$ yarn add @rspack/cli --dev
# pnpm
$ pnpm add @rspack/cli --save-dev
# bun
$ bun add @rspack/cli -D
```
And then start the development server by:
```bash
# with rspack.config.js
$ rspack serve
# with custom config file
$ rspack serve -c ./your.config.js
```
> See [CLI](https://rspack.dev/api/cli) for more details.
While starting the development server, you can specify the configuration by the `devServer` field of your Rspack config file:
```js
// rspack.config.js
module.exports = {
// ...
devServer: {
// the configuration of the development server
port: 8080
},
};
```
> See [DevServer](https://rspack.dev/config/dev-server) for all configuration options.
### With the API
While it's recommended to run `@rspack/dev-server` via the CLI, you may also choose to start a server via the API.
```js
import { RspackDevServer } from "@rspack/dev-server";
import rspack from "@rspack/core";
import rspackConfig from './rspack.config.js';
const compiler = rspack(rspackConfig);
const devServerOptions = {
...rspackConfig.devServer,
// override
port: 8888
};
const server = new RspackDevServer(devServerOptions, compiler);
server.startCallback(() => {
console.log('Successfully started server on http://localhost:8888');
});
```
> Cause `@rspack/dev-server` is based on `webpack-dev-server@5`, you can see the [webpack-dev-server API](https://webpack.js.org/api/webpack-dev-server/) for more methods of the server instance.
## Credits
Thanks to the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) project created by [@sokra](https://github.com/sokra)
## License
[MIT licensed](https://github.com/web-infra-dev/rspack-dev-server/blob/main/LICENSE).
