DDEV & Vite Hot Reloading fix in 2025 - for Laravel Inertia Fusion

Why I found myself in this place to need Vite hot reloading in DDEV, and it initially does not work?

There is a new project called Fusion PHP that puts your Vue 3 Single-File Components (SFC) on steroids. A Vue 3 SFC file typically contains sections for javascript, the HTML template, and CSS styles. The Fusion PHP project allows you to add server-side PHP and testing sections in the same .vue file. Fusion is powered by Laravel PHP and Inertia JS. See the video below for a brief introduction.

Developing such a project requires hot reloading. Any change to the source code in your IDE (PHPStorm, VSCode) should instantly change the web page in your web browser without manually reloading it.

My development environment for this type of project in the past has been Laravel Valet, which supports hot reloading out of the box because it runs on localhost. It is not Docker based and uses servers that are installed directly on your machine.

But nowerdays, I use DDEV instead, which provides Docker-based PHP development environments (and works with Symfony, Drupal, TYPO3, aso). Because DDEV runs in Containers, we need to get DDEV to work with Vite's hot reloading to get the full development experience.

Step 1: Install the Laravel project and start DDEV

For this example, we will use Aaron Francis' FusionCast project, which includes file-based routing and some .vue demo pages.

https://github.com/fusion-php/fusioncasts

This is only for ease of use, as the FusionCast project already contains some Fusion pages and some demo data for the database.

We clone the project, configure the project folder for DDEV, run DDEV, and install the project. After that we have a running application, but without hot reload. We fix that later.

If DDEV us not yet installed, take a look on the DDEV Get Started page. You can easily install it on Windows, Mac, and Linux.

# Change to your projects folder
cd /your/projects

# Clone the GIT project to a fusioncast folder
git clone https://github.com/fusion-php/fusioncasts.git fusioncasts

# Change to this new folder
cd fusioncasts

# Create a .ddev folder with all required configs inside the fusioncast folder
ddev config --project-type=laravel --docroot=public

# Create the containers and start them
ddev start

# [Inside ddev] Install required composer dependencies
ddev composer install

# [Inside ddev] Install fusion
ddev php artisan fusion:install

# [Inside ddev] Generate the Laravel application key
ddev php artisan key:generate

# [Inside ddev] Create database, database tables, and migrate demo data
ddev artisan migrate:fresh --seed

# Output all available DDEV Urls and ports
ddev describeCode language: PHP (php)

That looks good so far. We can now open the website in our browser and everything should work fine.

Open "fusioncast.ddev.site:xxxxx/search" in your browser (find the correct URL in your ddev describe output) and you should see the following page.

There is only one problem. If we change the source code of the file /resources/js/Pages/Search.vue in our IDE (PHPStorm, VSCode, …), the output of the website is not updated immediately. What a pity. Hot reloading does not work yet.

Lets fix that.

Step 2: Fix Vite hot reloading in DDEV

The following fix is based on the "Working with Vite in DDEV" tutorial by Matthias Andrasch.

Update the .ddev/config.yaml

We need to expose the hosts for Vite to make the hot reload work in DDEV.

# Setup for Vite hot reloading
web_extra_exposed_ports:
  - name: vite
    container_port: 5173
    http_port: 5172
    https_port: 5173Code language: PHP (php)

Update the vite.config.js

Add this sever object to the configuration.

export default defineConfig({
    // ...
    server: {
        host: "0.0.0.0",
        port: 5173,
        strictPort: true,
        origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}:5173`,
        cors: {
            origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
        },
    },
    // ...
});Code language: JavaScript (javascript)

Restart DDEV

First, we need to restart the DDEV containers because we have updated the DDEV configuration. The command "ddev start" will also rebuild the containers.

ddev start

Start the hot reloading

We can now start the hot reloading by starting the dev server.

# [Inside ddev] Run the dev server with hot reloading
ddev npm run devCode language: PHP (php)

Open fusioncast.ddev.site:xxxxx/search in your browser.

Change the source code of the file /resources/js/Pages/Search.vue.

The output of the site will be updated immediately.

Great. We now have Vite hot reloading in DDEV up and running for the project.

Feel free to add your suggestions into the comment section.