Install Laravel with Vite support in DDEV (Docker)
Tags: docker, laravel, php, vite
Published: 2024-05-19 09:18:57

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:

```bash 
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): 

```yaml
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](https://ddev.readthedocs.io/en/stable/users/configuration/config/) 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](https://ddev.readthedocs.io/en/stable/users/quickstart/#laravel) for more information.

Run `ddev start` to launch your new project 🚀

## 2. Install Laravel 

Run this command to install the latest stable laravel:

```bash
ddev composer create laravel/laravel
```

If you want to install a specific version, use:

```bash
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:

```bash
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:

```js
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:

```blade
<!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`:

```js
import './bootstrap';
import "../css/app.css";
```

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

```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](https://ddev.readthedocs.io/en/stable/users/configuration/config/)
- Vite + DDEV Guide: https://ddev.com/blog/working-with-vite-in-ddev/
- DDEV quickstart docs: https://ddev.readthedocs.io/en/stable/users/quickstart/#laravel