How to use npm run dev with DDEV in container ?

vite
, ,
1

Hello everyone !

Has anyone here ever managed to run npm run dev successfully with DDEV? When I run it outside the container it works fine, but when I run it inside DDEV, the CSS and JS aren’t loading and, of course, there is no hot reload.

2

Add this to .ddev/config.yaml, tweak vite.config and then run it with ddev npm run dev

web_extra_exposed_ports:
  - name: vite
    container_port: 5173
    http_port: 5172
    https_port: 5173

// 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: 5173,
    strictPort: true,
    // Defines the origin of the generated asset URLs during development,
    // this must be set to the Vite dev server URL and selected port.
    origin: `${process.env.DDEV_PRIMARY_URL_WITHOUT_PORT}:5173`,
    // Configure CORS securely for the Vite dev server to allow requests
    // from *.ddev.site domains, supports additional hostnames (via regex).
    // If you use another `project_tld`, adjust this value accordingly.
    cors: {
      origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
    },
  }

All of this is written in this article Working with Vite in DDEV - an introduction | DDEV

2 Likes
3

Ah yes its works the only thing i didn’t do is the cors
This should be added to docs

Thanks !

4

Oh one more thing

How can I expose correctly to be able to dev on mobile ?