You want to start developing with Laravel in DDEV and Docker - including Vite support? It's easy!
1. Setup a new DDEV project
Create your new folder and switch to it:
mkdir my-laravel-site && cd my-laravel-site
Now it's time to create a new DDEV project configuration, the most simple starting point would be:
ddev config --project-type=laravel --docroot=public
This commands creates the .ddev/config.yaml configuration file (which can be shared with team members in git):
name: my-laravel-site
type: laravel
docroot: public
php_version: "8.2"
webserver_type: nginx-fpm
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
type: mariadb
version: "10.11"
use_dns_when_possible: true
composer_version: "2"
web_environment: []
corepack_enable: false
You can also choose other database types and version, as well as your PHP and NodeJS version of choice:
# MySQL v8.0, PHP 8.2, NodeJS 20
ddev config --project-type=laravel --docroot=public --php-version="8.2" --database="mysql:8.0" --nodejs-version="20"
# PostgreSQL v16, PHP 8.2, NodeJS 20
ddev config --project-type=laravel --docroot=public --php-version="8.2" --database="postgres:16" --nodejs-version="20"
# MariaDB 10.11, PHP 8.2, NodeJS 20
ddev config --project-type=laravel --docroot=public --php-version="8.2" --database="mariadb:10.11" --nodejs-version="20"
You can either do this via CLI command - or just edit the .ddev/config.yaml file itself. See config.yaml options for more information.
For NodeJS, you can also use use a specific version to avoid "it works on my machine" problems or edge cases: --nodejs-version="20.12.1".
Btw: There is also support for the new SQLite defaults of laravel, see DDEV docs for more information.
Run ddev start to launch your new project 🚀
2. Install Laravel
Run this command to install the latest stable laravel:
ddev composer create laravel/laravel
If you want to install a specific version, use:
ddev composer create "laravel/laravel:^11"
The database connection settings in .env will be automatically inserted by ddev. Btw: You can view your database with viewers like ddev sequelace, ddev dbeaver, ddev tableplus, etc.
Run ddev launch to open the welcome page in your browser.
3. Add Vite support
The newer laravel versions already have a Vite integration, there are just a two tweaks needed for usage in DDEV:
First, we need to expose the Vite port 5173 in our Docker container. Add this to the .ddev/config.yaml-file:
web_extra_exposed_ports:
- name: node-vite
container_port: 5173
http_port: 5172
https_port: 5173
A ddev restart is needed afterwards. ⚠️
Secondly, we need to adjust the vite.config.js file:
import { defineConfig } from 'vite';
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 (Vite devserver URL)
origin: origin
}
});
Great, you can now run:
ddev npm install
ddev npm run dev
By running ddev npm run dev, laravel will automatically generate a public/hot file which points to the Vite devserver and port.
4. Develop with Vite
The default welcome template of Laravel has no Vite integration yet.
Replace resources/views/welcome.blade.php with something like this:
<!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/11.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>
Also import the app.css file in resources/js/app.js:
import './bootstrap';
import "../css/app.css";
And finally - add some styles to resources/css/app.css:
body{
color: blueviolet;
}
If you open https://my-laravel-site.ddev.site/, you should immediately see style changes provided by Vite when you edit your css or js files.
You can check out a full demo repository here: https://github.com/mandrasch/ddev-laravel-vite
Please let me know if there could be any improvements to this guide! Have fun developing!
The golden rule of "ddev ..."
When working with DDEV, please make always sure to use ddev ... in front of commands such as ddev composer, ddev npm (or ddev yarn), etc.
Otherwise your commands will be executed with your local computers PHP or NodeJS, not in the Docker container (which is the whole point of DDEV). You can also jump into the web container with ddev ssh.
More resources
- DDEV Discord: https://discord.gg/5wjP76mBJD
- Demo: https://github.com/mandrasch/ddev-laravel-vite
- Demo: https://github.com/mandrasch/ddev-laravel-breeze-vite
- Demo: https://github.com/mandrasch/ddev-laravel-breeze-livewire
- config.yaml options
- Vite + DDEV Guide: https://ddev.com/blog/working-with-vite-in-ddev/
- DDEV quickstart docs: https://ddev.readthedocs.io/en/stable/users/quickstart/#laravel
Top comments (0)