This is an example code, simulating how to run Vite on traditional PHP sites inside DDEV.
A bare-minimum setup to serve as example to adapt to other scenarios (WordPress, Laravel, etc).
For everything else beyond the PHP side please refer to the Vite documentation, which is great.
- Handle the cleanest way possible;
ddev start
ddev yarn install
ddev launch
For development, start Vite dev server inside ddev:
ddev yarn dev
Build for production:
ddev yarn build
The helpers.php script loads files from vite server and will fallback to production files from manifest if vite server is not running.
- Works gracefully!
A characteristic of this setup is that you'll run your project inside DDEV, for example https://vitephp.ddev.site/. Vite will be running at https://vitephp.ddev.site:5173 where our script and styles will be served from, but accessing https://vitephp.ddev.site:5173 directly will be empty, which is fine.
Of course, HMR and styles will work just fine! And fast!
- Mininum Node.js version >=14.18+
You may find the need to handle multiple entries, for example, one js/css for the backend and another js/css for frontend. For that, it depends directly on how you want to organize your code.
So you can have:
- A single Vite multi-page setup.
- A shared Vite setup, but outputing different entries in separated build steps, example here.
To get this running on Docker quickly, check out this fork. Thanks @mrothauer