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.