@expo/dev-server

What is @expo/dev-server?

@expo/dev-server is a development server for Expo projects. It provides a local server for serving your Expo app, enabling features like live reloading, error reporting, and debugging tools. This package is essential for a smooth development experience when working with Expo-based React Native applications.

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

Start Development Server

This feature allows you to start a development server for your Expo project. The server will serve your app and provide live reloading and other development tools.

const { startDevServerAsync } = require('@expo/dev-server');

async function startServer() {
  const server = await startDevServerAsync({
    projectRoot: __dirname,
    port: 19000
  });
  console.log(`Server is running on port ${server.port}`);
}

startServer();

Handle Errors

This feature demonstrates how to handle errors when starting the development server. It ensures that any issues encountered during server startup are properly logged.

const { startDevServerAsync } = require('@expo/dev-server');

async function startServer() {
  try {
    const server = await startDevServerAsync({
      projectRoot: __dirname,
      port: 19000
    });
    console.log(`Server is running on port ${server.port}`);
  } catch (error) {
    console.error('Failed to start server:', error);
  }
}

startServer();

Custom Middleware

This feature allows you to add custom middleware to the development server. In this example, a simple middleware logs the request URL for each incoming request.

const { startDevServerAsync } = require('@expo/dev-server');
const express = require('express');

async function startServer() {
  const app = express();
  app.use((req, res, next) => {
    console.log('Request URL:', req.url);
    next();
  });

  const server = await startDevServerAsync({
    projectRoot: __dirname,
    port: 19000,
    middleware: app
  });
  console.log(`Server is running on port ${server.port}`);
}

startServer();

Other packages similar to @expo/dev-server

webpack-dev-server

webpack-dev-server is a development server that provides live reloading and other development tools for projects using Webpack. It is highly configurable and widely used in the JavaScript ecosystem. Compared to @expo/dev-server, it is more general-purpose and not specifically tailored for Expo or React Native projects.

react-native-cli

react-native-cli is a command-line interface for React Native projects. It provides tools for starting a development server, building, and running React Native apps. While it offers similar functionalities to @expo/dev-server, it is not specifically designed for Expo projects and lacks some of the Expo-specific features.

vite

Vite is a fast development server and build tool for modern web projects. It offers instant server start, fast hot module replacement (HMR), and optimized builds. While Vite is not specifically designed for React Native or Expo projects, it provides a similar development experience with a focus on speed and performance.

README

dev-server

A React Native development server.

This package is used by Expo CLI to run a development server for React Native apps. It is built on Metro (a JavaScript bundler) and @react-native-community/cli-server-api (the HTTP and WebSocket API for native React apps to interface with the development server).