Demo repository for Laravel v10 with DDEV, including vite support.
- Status: 🚧 Work in progress, was not tested for real sites yet.🚧
- Local URL: https://ddev-laravel-vite.ddev.site/
ddev start
ddev composer install
ddev exec "cp .env.example .env"
ddev artisan key:generate
# open in browser, vite does not work yet
ddev launch
# install and run vite:
ddev npm install && ddev npm run dev
# reload your browser, vite should work now 🥳After that, only ddev npm run dev is needed (after ddev start).
- Installed Laravel in DDEV via quickstart documentation.
# https://ddev.readthedocs.io/en/latest/users/quickstart/#laravel
# (changed nodejs to be latest LTS, used ddev artisan directly)
ddev config --project-type=laravel --docroot=public --create-docroot --php-version=8.1 --nodejs-version=18
ddev composer create --prefer-dist --no-install --no-scripts laravel/laravel -y
ddev composer install
ddev artisan key:generate
# open in browser to see if it worked
ddev launch- After that we need to expose the vite port of the DDEV (docker) container so that it can be reached from outside (= from our computer) while developing. The http_port does not really matter.
Add this to your .ddev/config.yaml:
# .ddev/config.yaml
web_extra_exposed_ports:
- name: node-vite
container_port: 5173
http_port: 5172
https_port: 5173ddev restart is needed after that.
See Exposing Extra Ports via ddev-router for more information. You'll need at least DDEV v1.20.0 for this, before it was done via docker-compose files (example).
- The
vite.config.jsneeds some modifications as well. These.serveroptions were added:
server: {
// respond to all network requests (same as '0.0.0.0')
host: true,
// we need a strict port to match on PHP side
strictPort: true,
port: 5173,
hmr: {
// TODO: Is this the best way to achieve that? 🤔
// Force the Vite client to connect via SSL
// This will also force a "https://" URL in the public/hot file
protocol: 'wss',
// The host where the Vite dev server can be accessed
// This will also force this host to be written to the public/hot file
host: `${process.env.DDEV_HOSTNAME}`
}
},- Then we need to follow the Asset Bundling (Vite) documentation and add the output to the
welcome.blade.phptemplate.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include JS and CSS via vite, see https://laravel.com/docs/10.x/vite -->
@vite('resources/js/app.js')
</head>
<body>
<h1>Hello, vite!</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>- Add the CSS to to the
resources/js/app.jsfile:
// import css:
import '../css/app.css'
import './bootstrap';- If you now run
ddev npm run devvite should handle the reloading. Test with the following in `app.css
p{
color:red !important;
}You can simulate the production environment like this:
- Run
ddev npm run build - Set
APP_ENV=localtoAPP_ENV=productionin.env
Your styles will be imported like this:
<link rel="preload" as="style" href="https://ddev-laravel-vite.ddev.site/build/assets/app-3845d7e3.css" />- Support for Gitpod and Github Codespaces? (See https://github.com/tyler36/lara10-base-demo or https://github.com/mandrasch/ddev-craftcms-vite for DDEV + Vite + Codespaces example)
Laravel uses a combination of PHP config files (@vite blade directive) in combination with their NodeJS package laravel-vite-plugin. For local development the file public/hot connects these two.
See DDEV vite for general information.
# delete without snapshot
ddev delete -O
# reset files, beware: deletes all untracked files!
git clean -fdx- See also https://github.com/tyler36/lara10-base-demo
- https://github.com/mandrasch/ddev-laravel-breeze-vite/
- There is also a ddev-addon for vite (ddev-viteserve)
- Connect with the DDEV community on Discord
More experiments and info about DDEV + vite: https://my-ddev-lab.mandrasch.eu/
Thanks to the DDEV maintainers and DDEV open source community! 💚