Example usage with DDEV

The ddev docs look correct to me (I'm using lando). What issue do you have?

I have same problem with ddev and vite
https://ddev.com/blog/working-with-vite-in-ddev/

ddev npm run dev is running successfully in theme folder, but example-site.ddev.site:5173 shows 404 page not found

For lando, this snippet proxies port 3000 in the container to node.mysite.lndo.site (I have vite running on 3000 internally, but the port doesn't matter):

proxy:
node:
- node.mysite.lndo.site:3000

When I have an index.html file for vite, that's what appears at the node url. If I use an asset url, I get the code.

I never figured out how to proxy an internal port to an internal url with ddev.

Thanks for the answer. I didn't succeed to make vite module works in my theme. Maybe it is good idea to provide any simple starter theme with vite module.

I resolved my problem with this implementation https://github.com/almunnings/drupal-vite-bootstrap

In case someone needs it in the future, I managed to get it working after some trial and error. Here are the steps I followed.
As mentioned above, this detailed explanation shows the necessary steps to integrate Vite into a DDEV project. Essentially, you need to expose the node server port in DDEV and configure Vite to listen to all local addresses, as also mentioned here.

Add the following in .ddev.config.yaml, and ddev restart.

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

Next, we need to set up vite.config.js. In the following snippet, aside from the necessary server configs and enabling manifest file creation, we need to add our entry points for the final bundle. For simplicity's sake, we only manually target two files for our build processes, which will be referenced from manifest.json by the Vite module.

Although not directly related to the topic, we've added vite-plugin-live-reload to our dev dependencies, to automate page refreshes on Twig updates. This plugin is currently set up to watch Twig files directly added to the templates folder. In a typical setup, this should be extended to watch subfolders and other relevant directories.

# vite.config.js
import { defineConfig } from "vite";
import liveReload from 'vite-plugin-live-reload'
import path from "path";

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

export default defineConfig({
  plugins: [    
    liveReload('templates/*.twig'),
  ],
  build: {
    manifest: true,
    rollupOptions: {
      input: [
        path.resolve(__dirname, "./src/scss/main.scss"),
        path.resolve(__dirname, "./src/js/main.js")
      ]
    },
  },
  server: {
    host: "0.0.0.0",
    port: port,
    strictPort: true,
    origin: origin,
  },
});

In a basic DDEV but non-Drupal setup, you would only need to include the @vite/client scripts and your source files in your html or php files, and these steps would suffice to have a properly running demo. A misconception I had based on prior experience to Vite projects was that I needed to use http://localhost:5173; however, this not true. Once the dev server is up and running, you need to use the auto-generated project URL, for your DDEV project (e.g. https://[ddev-project].ddev.site). So, the next steps are related to Drupal and involve a few extra configurations we need to add.

A brief representation of the theme's file structure for this basic example, is:

- theme_name
[...]
-- dist
-- src
--- js
---- main.js
--- scss
---- main.scss
-- theme_name.info.yml
-- theme_name.libraries.yml
-- vite.config.js

In your theme.libraries.yml create your new libraries, by including the source files (e.g. main.scss) and set vite: true property, to enable Vite module handling. Then include the newly created library to your theme, in your prefered way.

# theme.libraries.yml
main:
  vite: true
  js:
    src/js/main.js: {}
  css:
    theme:
      src/scss/main.scss: {}
  dependencies:
    - core/drupal
    - core/drupalSettings

The last step is to set the devServerUrl property in Vite module because, by default, the needed scripts for HMR will be loaded via localhost:5173. To do so, add this entry to your settings.local.php:

# settings.local.php
$settings['vite'] = [
  'devServerUrl' => 'https://[project-name].ddev.site:5173'
];

As specified in the module documentation, the same can be achieved by adding extra properties to vite property in your library configuration. After completing all these, you now need to execute the following commands:

ddev npm i #if not already done
ddev npm run build #will create manifest.json from the entry files assigned in vite.config.js
ddev drush cr
ddev npm run dev #starts vite dev server

Now in https://[project-name].ddev.site you'll get an instance with HMR enabled. Make a change to one of the source files specified in your library or any first-level Twig in your templates folder, and you'll get an instant update.

Keep in mind that when adding new files as entry points in your Vite configs, you will need a new ddev npm run build to update the manifest, and then a ddev drush cr. Hope this helps someone, and since I'm still exploring this topic, any feedback or suggestions for improvement would be great.

Has anyone found a way to set up a proxy in ddev, so we can have node.MYSITE.ddev.site proxy port 5173?

I'm having issues with UnoCSS Devtools when the origin is the same url, even with the port specified. Having a separate url was working in lando.

Added a brief documentation page → for this issue based on my previous comment, and setting this as Needs Review. @mortona2k I hope you've reached to a conclusion so far with what you mentioned in your latest comment. Unfortunately I have no feedback on it, but I think this should be addressed in a new issue.

The docs look like my setup, and this has been working fine for a while.

I'll be talking about my experience with Vite + Drupal at PNW Drupal Summit next month.

I still have this issue though: https://www.drupal.org/project/vite/issues/3468138 🐛 1.2.1 release issues with build urls Active

I have a patch to revert the other half of the change I mentioned in there.

The issue I mentioned above is resolved in 1.3.0.

I was able to set up a url alias in ddev vite.SITENAME.ddev.site, and proxy port 5173.

Copy this to your .ddev/nginx_full directory: https://git.drupalcode.org/project/unocss_starter/-/blob/0.2.x/vite.conf...

It's not really necessary though, using the port in the url works fine.

This theme is a starting point for unocss + vite: https://www.drupal.org/project/unocss_starter →

I added a ton of readme notes and preconfigured it to work with lando and ddev.

It should work without unocss as well.