Raised: $0
0% of monthly goal Help us cross the finish line!
Goal: $12,000
Raised: $0 Goal: $12,000
0% of monthly goal Help us cross the finish line!
Sponsor DDEV

add-on registry tests last commit

ddev-vite

What is ddev-vite?

ViteJs is a modern bundler, designed to be fast.

This add-on is a low-config option that exposes Vite’s default port from DDEV so you can view the page in your browser. It is based on the article Working with Vite in DDEV - an introduction, by Matthias Andrasch. Developers are responsible for installing, maintaining, and running the Vite server. This add-on only exposes the port.

Components of the repository

Getting started

This add-on assumes the developer has:

  1. Install the add-on and restart DDEV
ddev add-on get tyler36/ddev-vite
ddev restart
  1. Update vite.config.js
const port = 5173;
const origin = process.env.DDEV_PRIMARY_URL;

export default defineConfig({
    ...
    // Adjust Vites dev server for DDEV: https://vitejs.dev/config/server-options.html
    server: {
        // The following line is require until the release of https://github.com/vitejs/vite/pull/19241
        cors: { origin },
        // ----------------
        host: '0.0.0.0',
        port: port,
        origin: `${origin}:${port}`,
        strictPort: true
    },
});
  1. Start Vite inside the container.
ddev npn run dev

Automatically start ViteJs

To automatically start the ViteJs server, update DDEV post-start hook in .ddev/config.yaml. For example:

hooks:
  post-start:
    - exec: npm run dev

Contributed and maintained by @tyler36