Laravel Vite configuration with Docker

I am using docker container to run laravel 9/10 application. When I create a new project and visit my app url https://xyz.com/app_name, the app works. Now I am trying to configure vite. Here is what my vite.config.js file looks like:

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

const app_url = 'https://xyz.com/app_name';

export default defineConfig({
    server: {
        https: {
            key: fs.readFileSync(`/etc/ssl/private/server_key.key`),
            cert: fs.readFileSync(`/etc/ssl/certs/server_cert.cer`),
        },
        host: 'localhost',
        port: 5173,
        hmr: {host: 'localhost', protocol: 'ws'},
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

And in my blade file I used @vite(['resources/css/app.css', 'resources/js/app.js']) to load the assets. Unfortunately I got the error

GET http://localhost:5173/@vite/client net::ERR_BLOCKED_BY_CLIENT
GET http://localhost:5173/resources/css/app.css net::ERR_BLOCKED_BY_CLIENT
GET http://localhost:5173/resources/js/app.js net::ERR_BLOCKED_BY_CLIENT
GET https://apps.uis.edu/favicon.ico 404 (Not Found)

I tried to

add the urls from the output of npm run dev or vite command to the TrustProxies middleware.
add the same urls in the TrustHosts middleware.
Change the host in the vite.config.js file to https://xyz.com/app_name

LaryAI

2 years ago

Level 58

The issue seems to be related to the fact that the assets are being loaded from the Vite development server running on port 5173, while the Laravel application is running on a different port. To fix this, you need to configure Vite to use the correct public path.

In your vite.config.js file, you can add the publicDir option to specify the public directory where your assets will be served from. Assuming your Laravel application is serving assets from the public directory, you can set it like this:

export default defineConfig({
  // ...
  build: {
    publicDir: 'public',
  },
});

Then, in your blade file, you can use the mix() helper function to generate the correct asset URLs:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

This will generate URLs like /css/app.css and /js/app.js, which will be correctly proxied to the Vite development server by the Laravel application.

Note that you may need to run npm run dev or npm run build to generate the assets in the public directory before they can be served by the Laravel application.

krazylegs

2 years ago

Level 1

Not sure if you managed to resolve your issue. The AI answer didn't resolve the issue for me, unfortunately. This could be due to the fact im working with Docker.

What did resolve the issue is the settings below:

export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), ], server: { host: '0.0.0.0', port: 9001, hmr: { host: '127.0.0.1', }, }, });

Further explanation provided from the original source i referenced for help -- //mrzebra.co.uk/code/2023/01/16/how-to-use-laravel-vite-from-docker/ -- (Remember to expose the port used in your docker container and change the host to '0.0.0.0')

samuelaustinudhedhe

1 month ago

Level 1

I recently started working with Docker, and I came across this issue:

The way I resolved it was:

Instead of running "sail run dev" in my terminal, I took a more Docker-based service approach.

I created the "vite" service in Docker Compose ( docker-compose.yaml or compose.yaml file)

 services:
     laravel.test:
         build:
             context: './vendor/laravel/sail/runtimes/8.5'
             dockerfile: Dockerfile
             args:
                 WWWGROUP: '${WWWGROUP}'
         image: 'sail-8.5/app'
         restart: unless-stopped
         extra_hosts:
             - 'host.docker.internal:host-gateway'
         ports:  
             - '${APP_PORT:-80}:80'
             #- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'  #remove this to avoid port in use error

 	/** ... rest of your config ...*/

 	## Vite Service run in development mode. run: "sail --profile dev up -d" to start  ##
     vite:
         image: 'node:20-alpine'
         working_dir: /var/www/html
         volumes:
             - '.:/var/www/html'
         ports:
             - '${VITE_PORT}:${VITE_PORT}'   #  port is defined in your .env as VITE_PORT=5713
         command: sh -c "npm install && npm run dev -- --host"
         networks:
             - sail
         profiles:
         - dev

Open your vite.config.js and update your config to these parameters:

 import {defineConfig, loadEnv} from 'vite';

 export default({mode}) => {
     process.env = {...process.env, ...loadEnv(mode, process.cwd())}

     return defineConfig({

         // allows you to customize the build environment
         server: {
             host: process.env.VITE_HOST, // CRITICAL
             cors: true,
             port: process.env.VITE_PORT,
             watch: {
                 usePolling: true, // important for WSL/Docker
             },
             hmr: {
                 host: process.env.VITE_HMR_HOST,
                 protocol: 'ws',
                 port: process.env.VITE_HMR_PORT, // ✅ REQUIRED

             },
         },
     });
 }

Open you .env and add the configs to it

 VITE_PORT=2123   # any port of your choice just make sure it is free
 VITE_HOST=0.0.0.0
 VITE_HMR_HOST=127.0.0.1  # here you can use your main domain name, e.g., example.local or leave as is
 VITE_HMR_PORT="${VITE_PORT}"

4 in your terminal run ./vendor/bin/sail --profile dev up -d --build

Please note: running "sail down" doesn't delete/remove the vite service. you will have to delete/remove it manually if you need to delete it, so if you update any config relating to vite, you should delete it manually and recreate it

This config assumes that you already have a working Laravel project in Docker and require only a working Vite

Please or to participate in this conversation.