How to Setup React with DDEV and Vite

By Richard Papp , 28 December 2025

If you are looking to develop React applications in a containerized environment, DDEV provides an excellent solution. This guide walks you through setting up a React project with Vite inside DDEV, giving you a consistent development environment that's easy to share across teams.

Prerequisites

Before starting, make sure you have DDEV installed on your system. If you haven't installed it yet, visit the DDEV documentation for installation instructions.

Step 1: Configure Your DDEV Project

First, let's initialize a new DDEV project. Change to your project folder and run the following command in your terminal:

ddev config

When prompted, provide these values:

  • Project name: react
  • Project root:
  • Project type: php

This creates a basic DDEV configuration for your project.

Note about the project name: The project name (react in this example) can be anything you choose. This will be used to generate your DDEV URL (e.g., https://react.ddev.site). If you choose a different name like myapp or frontend, your URL will be https://myapp.ddev.site or https://frontend.ddev.site accordingly. Make sure to use your chosen project name when accessing the application in Step 7.

Step 2: Expose the Vite Development Server Port

Since Vite runs on port 5173 by default, we need to expose this port in DDEV. Open the .ddev/config.yaml file and add the following configuration:

web_extra_exposed_ports:
  - name: vite
    container_port: 5173
    http_port: 5172
    https_port: 5173

This configuration ensures that Vite's development server is accessible from your host machine.

Step 3: Start DDEV

Now start your DDEV environment:

ddev start

DDEV will spin up the necessary containers and prepare your development environment.

Step 4: Create Your React Application with Vite

With DDEV running, create a new React project using Vite. Run this command from your project root:

ddev npm create vite@latest .

Follow the prompts to select React as your framework and choose your preferred variant (JavaScript or TypeScript). Or skip the prompts and create a React project directly:

ddev npm create vite@latest . -- --template react

Both will create a new React project with Vite. The latter is faster if you know you want a JavaScript-based React project. If you prefer TypeScript, you can use --template react-ts instead.

Note: You may encounter additional prompts such as:

  • Current directory is not empty. Please choose how to proceed:  - Select "Ignore files and continue"
  • Use Rolldown-Vite? - Select "No"
  • Install with npm and start now? - Select "Yes"

Step 5: Configure Vite for DDEV

Vite needs special configuration to work properly within DDEV's containerized environment. Open vite.config.js in your project root and replace its contents with:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  // Add entrypoint
  build: {
    // our entry
    rollupOptions: {
      input: path.resolve(__dirname, "src/main.js"),
    },
    // manifest
    manifest: true,
  },
  // Adjust Vite's dev server for DDEV
  // https://vitejs.dev/config/server-options.html
  server: {
    // Respond to all network requests
    host: "0.0.0.0",
    port: 5173,
    strictPort: true,
    // Defines the origin of the generated asset URLs during development,
    // this must be set to the Vite dev server URL and selected port.
    origin: `${process.env.DDEV_PRIMARY_URL_WITHOUT_PORT}:5173`,
    // Configure CORS securely for the Vite dev server to allow requests
    // from *.ddev.site domains, supports additional hostnames (via regex).
    // If you use another `project_tld`, adjust this value accordingly.
    cors: {
      origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
    },
  },
})

Let's break down what these configurations do:

  • host: "0.0.0.0" - Allows Vite to accept connections from outside the container
  • port: 5173 - Uses Vite's default port
  • strictPort: true - Ensures Vite fails if the port is already in use
  • origin - Sets the correct URL origin using DDEV's environment variables
  • cors - Configures CORS (Cross-Origin Resource Sharing) to accept requests from DDEV's .ddev.site domains

Step 6: Start the Development Server

Now you are ready to run your React application! Start the development server:

ddev npm run dev

Step 7: Access Your Application

Open your browser and visit:

https://react.ddev.site:5173/

You should see your React application running with hot module replacement enabled:

Image removed.

Restarting the Development Server

Whenever you need to restart the development server (after stopping DDEV or the dev server), simply run in your project root:

ddev npm run dev

Conclusion

You now have a fully functional React development environment running inside DDEV with Vite. This setup provides the benefits of containerization while maintaining the fast refresh times that Vite offers.

The configuration ensures proper communication between the containerized Vite server and your host machine, with CORS properly configured for DDEV's domain structure.

Sources

Tags