@web/dev-server-core

What is @web/dev-server-core?

@web/dev-server-core is a core library for creating a modern web development server. It provides a flexible and extensible platform for serving web applications, with support for modern web features like ES modules, hot module replacement (HMR), and middleware.

What are @web/dev-server-core's main functionalities?

Basic Server Setup

This code demonstrates how to set up a basic development server using @web/dev-server-core. The server will serve files from the './public' directory on port 8080.

const { startDevServer } = require('@web/dev-server-core');

const config = {
  port: 8080,
  rootDir: './public',
};

startDevServer({ config }).then(server => {
  console.log(`Server running at http://localhost:${config.port}`);
});

Middleware Support

This example shows how to add middleware to the development server. The middleware logs each request URL to the console.

const { startDevServer } = require('@web/dev-server-core');

const config = {
  port: 8080,
  rootDir: './public',
  middleware: [
    (ctx, next) => {
      console.log(`Request: ${ctx.url}`);
      return next();
    }
  ]
};

startDevServer({ config }).then(server => {
  console.log(`Server running at http://localhost:${config.port}`);
});

Hot Module Replacement (HMR)

This code demonstrates how to enable Hot Module Replacement (HMR) in the development server. HMR allows modules to be updated in the browser without a full page reload.

const { startDevServer } = require('@web/dev-server-core');

const config = {
  port: 8080,
  rootDir: './public',
  watch: true,
  hmr: true
};

startDevServer({ config }).then(server => {
  console.log(`Server running with HMR at http://localhost:${config.port}`);
});

Other packages similar to @web/dev-server-core

webpack-dev-server

webpack-dev-server is a development server that provides live reloading and HMR for webpack projects. It is tightly integrated with webpack and offers a range of features for development, including middleware support and proxying. Compared to @web/dev-server-core, webpack-dev-server is more focused on webpack-specific workflows.

vite

Vite is a modern development server and build tool that offers fast development and optimized production builds. It supports ES modules, HMR, and a plugin system. Vite is designed to be framework-agnostic and provides a faster development experience compared to traditional bundlers. It offers similar functionalities to @web/dev-server-core but with a focus on speed and simplicity.

parcel

Parcel is a web application bundler that offers zero configuration and fast performance. It includes a development server with HMR and supports a wide range of file types out of the box. Parcel aims to provide an easy-to-use development experience with minimal setup, making it a good alternative to @web/dev-server-core for developers looking for simplicity.

README

Web Dev Server Core

Core library powering the web server of @web/test-runner and @web/dev-server

See our website for full documentation.