May 23, 2023

Level 3

Anyone successfully using DDEV and Vite (Fresh Laravel 10)?

I'm setting up a new/fresh Laravel install for the first time in a while. I'm used to using DDEV (https://ddev.readthedocs.io) to containerise and serve pretty much all my web dev projects and I'd like to stick with it.

Previously I've used Mix/Webpack which works fine. Within the DDEV container I can run the 'dev', 'prod' and 'watch' scripts fine, without it running up a server on localhost and it's own port.

With Vite, when I run 'npm run dev' (which watches too, it seems) it also starts a server on some other port, but from within the container... I think. Basically I just want Vite to watch/build, but not serve. Can this be done?

If not I think I might have to work out how to switch back to Mix/Webpack with L10. I did think I should give Vite a go though first.

Not sure I've even explained my problem well. I think if you know/use DDEV, you'll see what I mean 😅

LaryAI

2 years ago

Level 58

Yes, it is possible to use DDEV and Vite together. You can configure Vite to watch and build your assets without serving them by setting the server option to false in your vite.config.js file. Here's an example configuration:

// vite.config.js

module.exports = {
  server: false,
  build: {
    outDir: 'public',
  },
  // other options...
}

This configuration will build your assets to the public directory, but will not start a server. You can then use DDEV to serve your application from the public directory.

To run Vite in watch mode, you can use the npm run watch command, which will watch your files for changes and rebuild them automatically.

Here's an example package.json script:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "watch": "vite --watch"
  }
}

With this configuration, you can run npm run watch to start watching your files for changes and rebuilding them automatically.

I hope this helps!

meredevelopment

2 years ago

Level 3

Ok the auto response helped me stop the server, which is good, but I was wrong about the cause of the problems.

On closer inspection, when Vite has built assets, pages render correctly. For example the default Auth scaffolding login page references assets like so when built:

<link rel="preload" as="style" href="https://laravelvite.ddev.site/build/assets/app-fc1fe159.css">
<link rel="modulepreload" href="https://laravelvite.ddev.site/build/assets/app-e7c8c463.js">
<link rel="stylesheet" href="https://laravelvite.ddev.site/build/assets/app-fc1fe159.css">
<script type="module" src="https://laravelvite.ddev.site/build/assets/app-e7c8c463.js"></script>

Note the paths are correct, the full DDEV url is used.

However when it's in dev/watching, here's the output:

<script type="module" src="http://127.0.0.1:5173/@vite/client"></script>
<link rel="stylesheet" href="http://127.0.0.1:5173/resources/css/app.css">
<script type="module" src="http://127.0.0.1:5173/resources/js/app.js"></script>

The assets are served from an IP and port that must be internal to the container, but as I'm viewing the site on https://laravelvite.ddev.site/login I get CORS errors and other nags:

- Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5173/@vite/client. (Reason: CORS request did not succeed). Status code: (null).
- Module source URI is not allowed in this document: “http://127.0.0.1:5173/@vite/client”.
- Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5173/resources/js/app.js. (Reason: CORS request did not succeed). Status code: (null).
- Module source URI is not allowed in this document: “http://127.0.0.1:5173/resources/js/app.js”.
- Loading module from “http://127.0.0.1:5173/@vite/client” was blocked because of a disallowed MIME type (“text/html”).
- Loading module from “http://127.0.0.1:5173/resources/js/app.js” was blocked because of a disallowed MIME type (“text/html”).

Does anyone know how I can get Vite to do relative pathing, or hardcode my URL into the config. Or maybe I need to approach this completely differently. As long as I end up with a containerised L10 install with Vite working, I'm open to suggestions 😅 - Ideally something that still allows me to use DDEv on other projects at the same time.

jphelan

2 years ago

Best Answer

Level 2

I had the same issue and this article works for me. https://medium.com/@mtillmann_68557/using-laravel-9-breeze-with-ddev-and-vite-3e40abd2954a

1 like

meredevelopment

2 years ago

Level 3

@jphelan Thank you! worked perfectly. And the only thing I changed about that method was to edit the 'dev' script in package.json to point to "vite --host" instead of having to use npm run dev -- --host each time. Keeps it a bit closer to other projects.

robertp1980

2 years ago

Level 3

I also found this. This helped me!

https://github.com/mandrasch/ddev-laravel-breeze-vite/

1 like

maxi032

2 years ago

Level 1

this vite.config.js worked for me :

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: '127.0.0.1',  // Add this to force IPv4 only
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

2 likes

pittet

2 years ago

Level 1

This is my working setup vite.setup.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

in the blade template

<head>
...
    @vite([
        'resources/sass/app.scss',
        'resources/js/app.js',
    ])
</head>

1 like

Please or to participate in this conversation.