DEV Community

Matthias Andrasch
Matthias Andrasch

Posted on • Updated on

Install Laravel with Vite support in DDEV (Docker)

#docker #laravel #php #vite

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

If you want to install a specific version, use:

ddev composer create "laravel/laravel:^11"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
    }
});
Enter fullscreen mode Exit fullscreen mode

Great, you can now run:

ddev npm install
ddev npm run dev
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Also import the app.css file in resources/js/app.js:

import './bootstrap';
import "../css/app.css";
Enter fullscreen mode Exit fullscreen mode

And finally - add some styles to resources/css/app.css:

body{
    color: blueviolet;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
mdjaman profile image
Marcel Djaman •

Nice tuts! Have a question tho. What happened if have some teammates who doesn't use ddev? Still working with this vite.config.js?

Collapse
 
mandrasch profile image
Matthias Andrasch • • Edited

Hey, great question!

I had team members working with and without DDEV on the same project - and I had to make the vite.config.js aware of that.

DDEV provides some env values to process.env which you can access via if (Object.prototype.hasOwnProperty.call(process.env, 'DDEV_PRIMARY_URL')) {

So if process.env.DDEV_PRIMARY_URL is defined, you know the developer uses DDEV. If not, just keep "localhost", etc.

I do this for GitHub Codespaces and Gitpod as well, see e.g. github.com/mandrasch/ddev-laravel-...

You would have to keep the defaults for non-ddev users and add ddev settings if ddev is detected.

Cheers!

Read next

sarahcssiqueira profile image

Setting Up a WordPress Development Environment with DDEV

Sarah Siqueira -

giulianaolmos profile image

Technical Interview - Boilerplate 1 - Node + Typescript + PostgreSQL

Giuliana Olmos -

mdarifulhaque profile image

2463. Minimum Total Distance Traveled

MD ARIFUL HAQUE -

navneet_verma profile image

Top 50 PHP Libraries You Haven't Heard Of (But Should Be Using!)

Navneet Verma -