Demo repository for Laravel v11 with DDEV, including Vite support.
Based on the tutorial Install Laravel with Vite support in DDEV (Docker).
You can run this
Install DDEV and run the following commands:
git clone https://github.com/mandrasch/ddev-laravel-vite.git
# or git clone git@github.com:mandrasch/ddev-laravel-vite.git
cd ddev-laravel-vite/
# automatically creates .env with correct db settings
ddev start
# install dependencies
ddev composer install && ddev npm install
# create key for .env
ddev artisan key:generate
# create db tables
ddev artisan migrate
# Open your website in browser, ...
ddev launch
# start the local dev server (Vite), ...
ddev npm run dev
# ... and hit reload in browser. Vite should work now 🥳After this first time setup, only ddev npm run dev is needed (after ddev start).
Your site is accessible via https://ddev-laravel-vite.ddev.site.
You could also import a database dump via ddev import-db --file=dump.sql.gz or use ddev pull to setup a project. Use ddev sequelace to view your database.
Just hit the button, wait for the initial setup and start developing:
- Click the button
- Wait for
postCreateCommand.shto be finished - Switch Vite port to public in ports tab (can't be automated currently)
- Run
ddev npm run dev - Open site (web http) via ports tab (or use
ddev launchin future (currently small bug to be fixed)).
The port switch can take a minute. Just wait if it doesn't work instantly.
Access control panel via /admin (or use in future ddev launch /admin, when small bug is fixed in ddev).
Login via user admin and password newPassword .
See creation log via 'CMD + P > View creation log' if errors occur. Unfortunately there is no general error notification when this fails. But if there is only one port in the ports tab installation did not succeed. Sometimes only a full rebuild solve the problems, use:
SHIFT + CMD + P > Codespaces: Full rebuild
Containers and db will be deleted.
Tutorial: Install Laravel with Vite support in DDEV (Docker).
- Installed Laravel in DDEV via quickstart documentation.
ddev config --project-type=laravel --docroot=public --php-version="8.2" --database="mysql:8.0" --nodejs-version="20"
ddev start
ddev composer create "laravel/laravel:^11"
ddev artisan key:generate
# open in browser
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: 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:
import laravel from 'laravel-vite-plugin';
const port = 5173;
const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
server: {
// respond to all network requests
host: '0.0.0.0',
port: port,
strictPort: true,
// Defines the origin of the generated asset URLs during development,
// this will also be used for the public/hot file (devserver URL)
origin: origin
}
});- 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" /># delete without snapshot
ddev delete -O
# reset files, beware: deletes all untracked files!
git clean -fdx
# reset files, but not .ddev
git clean -fdx -e .ddev/Thanks to the DDEV maintainers and DDEV open source community, especially Ofer Shaal for providing DrupalPod, Randy Fay and tyler36 for suggestions and feedback! 💚
- Other Laravel demos: https://github.com/mandrasch?tab=repositories&q=ddev-laravel&type=&language=&sort=
- https://github.com/tyler36/lara10-base-demo
More experiments and notes about DDEV + vite: https://my-ddev-lab.mandrasch.eu/
Connect with the DDEV community on Discord