Nginx Question posted in
The official documentation can be found here.

Nginx – Vite config on docker

I’m using a machine on my network (not the one I use to edit/view the application) to host a docker laravel application.

I’m struggling setting up vite.

I get the console errors:

jobs:20

   GET http://[::]:5173/@vite/client net::ERR_BLOCKED_BY_CLIENT

jobs:20

   GET http://[::]:5173/resouces/css/app.css net::ERR_BLOCKED_BY_CLIENT

jobs:20

   GET http://[::]:5173/resources/js/app.js net::ERR_BLOCKED_BY_CLIENT

jobs:500

   GET http://[::]:5173/resources/css/app.css net::ERR_BLOCKED_BY_CLIENT

My vite.config.js:

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

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

The laravel app is working fine on http://192.168.1.216:94/

docker-compose:

version: '3'
services:

  #PHP Service
  freelancerapp:
    build:
      context: .
      dockerfile: Dockerfile
    image: php:8.1.0-fpm
    container_name: freelancerapp
    restart: unless-stopped
    tty: true
    environment:
      SERVICE_NAME: freelancerapp
      SERVICE_TAGS: dev
    working_dir: /var/www
    volumes:
      - ./:/var/www
      - ./php/local.ini:/usr/local/etc/php/conf.d/local.ini
    networks:
      - freelancerapp-network

  #Nginx Service
  webserverfreelancer:
    image: nginx:alpine
    container_name: webserverfreelancer
    restart: unless-stopped
    tty: true
    ports:
      - "94:80"
    volumes:
      - ./:/var/www
      - ./nginx/conf.d/:/etc/nginx/conf.d/
    networks:
      - freelancerapp-network

  #MySQL Service
  freelancerdb:
    image: mysql:5.7.22
    container_name: freelancerdb
    restart: unless-stopped
    tty: true
    ports:
      - "3308:3306"
    networks:
      - freelancerapp-network
#Docker Networks
networks:
  freelancerapp-network:
    driver: bridge
#Volumes
volumes:
  freelancerdbdata:
    driver: local

I’m using npm run dev to run the vite server. I’m presuming my vite set up is wrong as I’ve not used vite before. Could someone please point me in the right direction.

Laravel, Vite, Docker.

Tags:

2

Answers


  1. 0 
    server: {
    strictPort: true,
    port: 5173,
    host: '0.0.0.0',
    origin: 'http://localhost:5173',
    hmr: {
        host: 'localhost',
    },
    watch: {
        ignored: ['./app/**', './bootstrap/**', './config/**', './database/**', './lang/**', './node_modules/**', './public/**', './routes/**', './storage/**', './tests/**', './vendor/**'],
    },
}

    You need to use a configuration like this if using an older version and build. for some reason it doesn’t know what to target unless its set as such. nowadays with the newer version it is not needed. hope it helps!

    * PS: Some of the rules are not needed and can be dropped, this is just what I needed and worked in my exact case.

    Login or Signup to reply.
  2. 0

    This works for me, 4 steps:

    1. in freelancerapp service in docker-compose.yml, expose 5173 port adding:
    # docker-compose.yml

    freelancerapp:
        ...
        ports:
            - "5173:5173"  # default port of Vite!
        ...
    1. in vite.config.js add server block:
    # vite.config.js

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    // add this to map with docker container
    server: { 
        host: '0.0.0.0',
    }
});

    You can see 0.0.0.0 running docker ps, below PORTS column of your app container. Something like this:

       ...  0.0.0.0:5173->5173/tcp, 9000/tcp   ...    # your_app_container
    1. Login in your app container:

    docker exec -it app_container_name bash

    1. From inside the app container, run
      npm run dev

    Running this command you can reach your app, in hot reload mode, from the browser on the port mapped in webserver container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search