🚧 Disclaimer: Early preview of a private project, work in progress 🚧
unofficial web UI experiment

Project configurator

Select "custom config" to define your own config - or select a framework / CMS.

FAQ

More config settings needed?

There are many more config options, see Config Options as well as "ddev help config".

You can also change your configuration later via the generated ".ddev/config.yaml". Use "ddev restart" to apply changes.

Vite support?

Add this to your ".ddev/config.yaml":

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

Run "ddev restart" afterwards to apply these changes.

Modify your "vite.config.js" like this, the ".server" part is important:

import { defineConfig } from 'vite'

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

export default defineConfig({

  // Your settings
  // ...

  // Adjust Vites dev server for DDEV
  // https://vitejs.dev/config/server-options.html
  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
    origin: origin,
    cors: {
	origin: /https?://([A-Za-z0-9-.]+)?(.ddev.site)(?::d+)?$/,
    },
  },

})

See Working with Vite in DDEV for more information.

How do I install DDEV?

It's pretty easy, just get started here: Install and start using DDEV.

Gitpod support?

See mandrasch/ddev-laravel-vite, DrupalPod or ddev/ddev-gitpod-launcher as example.