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.
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.
vensires → credited axioteo → .