Docs
API
Blog
Version
Docs
API
Blog
Version: v5

DevServer

The Re.Pack DevServer is built on top of Fastify and provides a subset of webpack-dev-server configuration options.

Usage

The DevServer is configured through the devServer option in your configuration:

rspack.config.mjs
import * as Repack from '@callstack/repack';

export default {
  // ... other options
  devServer: {
    port: 8081,
    host: 'localhost', 
    hot: true,
    // ... other DevServer options
  },
  plugins: [
    new Repack.RepackPlugin(),
  ],
};

Configuration Options

host

  • Type: string
  • Default: 'localhost'

Hostname or IP address under which to run the development server.

Supported special values:

  • 'local-ip' - Listen on all available network interfaces
  • 'local-ipv4' - Listen on local IPv4 address
  • 'local-ipv6' - Listen on local IPv6 address

port

  • Type: number
  • Default: 8081

Port under which to run the development server.

hot

  • Type: boolean
  • Default: true

Whether to enable Hot Module Replacement (HMR).

server

  • Type: 'http' | 'https' | { type: 'http' } | { type: 'https'; options?: HttpsServerOptions }
  • Default: 'http'

Options for running the server as HTTPS. When set to 'https' or { type: 'https' }, the server will run with HTTPS using default options. For custom HTTPS configuration, provide an options object.

rspack.config.mjs
import fs from 'node:fs';

export default {
  devServer: {
    server: 'https', // Simple HTTPS with default options
    // or
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('/path/to/server.key'),
        cert: fs.readFileSync('/path/to/server.crt'),
      },
    },
  },
};

proxy

  • Type: ProxyConfig[]
  • Default: undefined

Configuration for proxying API requests. Each entry in the array defines a proxy rule that forwards matching requests to a target server.

interface ProxyConfig extends ProxyOptions {
  path?: ProxyOptions['pathFilter'];
  context?: ProxyOptions['pathFilter'];
}

The ProxyConfig extends http-proxy-middleware options with webpack-dev-server compatible aliases:

  • path - Alias for pathFilter
  • context - Alias for pathFilter
rspack.config.mjs
export default {
  devServer: {
    proxy: [
      {
        context: ['/api', '/auth'],
        target: 'http://localhost:3001',
        changeOrigin: true,
      },
      {
        path: '/graphql',
        target: 'http://localhost:4000',
        ws: true, // Proxy websockets
      },
    ],
  },
};

setupMiddlewares

  • Type: SetupMiddlewaresFunction
  • Default: undefined

Function to customize middleware setup, allowing you to reorder, modify, or add custom middlewares.

type SetupMiddlewaresFunction = (
  middlewares: Middleware[],
  devServer: FastifyInstance
) => Middleware[];

The function receives:

  • middlewares - Array of built-in middlewares
  • devServer - Fastify server instance

Built-in middlewares include:

  • dev-middleware - @react-native/dev-middleware enabling use of React Native Devtools
  • proxy-middleware-* - proxy middlewares created via proxy
rspack.config.mjs
export default {
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      // Add custom middleware before built-ins
      middlewares.unshift({
        name: 'auth-middleware',
        middleware: (req, res, next) => {
          // Custom authentication logic
          next();
        },
      });
      
      // Add custom route
      devServer.get('/health', async () => {
        return { status: 'ok' };
      });
      
      return middlewares;
    },
  },
};

Example

Add middleware while respecting middlewares order

Use unshift() to run middleware before all other middlewares or use push() to run middleware after all other middlewares:

rspack.config.mjs
export default {
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      // add before every other middleware
      middlewares.unshift({
        name: 'first-in-array',
        path: '/foo/path',
        middleware: (req, res) => {
          res.send('Foo!');
        },
      });

      // add after every other middleware
      middlewares.push({
        name: 'hello-world-test-one',
        path: '/foo/bar',
        middleware: (req, res) => {
          res.send('Foo Bar!');
        },
      });

      return middlewares;
    },
  },
};

Add new route to the DevServer directly

rspack.config.mjs
export default {
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      devServer.get('/some/path', (_, response) => {
        response.send('/some/path GET response');
      });

      return middlewares;
    },
  },
};

Access the DevServer logger

Access the DevServer instance for routes and logging:

rspack.config.mjs
export default {
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      devServer.get('/test', (_, response) => {
        response.send('GET test response');
        devServer.log.info('GET /test called');
      });

      return middlewares;
    },
  },
};
Need to boost your app's performance?
We help React Native teams enhance speed, responsiveness, and efficiency.