Laravel ddev project setup

mkdir my-laravel-site && cd my-laravel-site
ddev config --project-type=laravel --docroot=public
ddev composer create "laravel/laravel:^11"
ddev launch

Add vite support

Since June 2022 Vite is the default bundler for Laravel, replacing Laravel Mix (Webpack).

First, expose the port via .ddev/config.yaml and run ddev restart:

# .ddev/config.yaml
web_extra_exposed_ports:
  - name: node-vite
    container_port: 5173
    http_port: 5172
    https_port: 5173

Afterwards, you just need to change the vite.config.js like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

const port = 5173;
const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        // respond to all network requests
        host: '0.0.0.0',
        port: port,
        strictPort: true,
        // Defines the origin of the generated asset URLs during development,
        // this will also be used for the public/hot file (Vite devserver URL)
        origin: origin
    }
});

Install NPM deps

ddev npm install

Link the storage

artisan storage:link

The devserver can be started via ddev npm run dev.