Getting Vite asset bundling to work with Laravel and Docker

Let's take a few minutes (and a few lines of code) to get Vitejs hot reloading to work in our setup; this will allow us to have automatic asset bundling to work whenever we edit a .js or .css file (and not have to run "dr npm run build" every time we make a change). Moreover, the browser will get notified automatically of any change and reload the page by itself.

• First, let's open the 5173 port of the php container in the docker-compose.yml file:

version: "3.7"
volumes:
    postgres-data:
    redis-data:
networks:
    frontend:
    backend:
services:
    proxy:
        image: nginx:latest
        ports:
            - "8080:80"
        volumes:
            - ./:/var/www/app
            - ./docker/nginx/nginx-site.conf:/etc/nginx/conf.d/default.conf
        networks:
            - frontend
            - backend
    php:
        build:
            context: ./docker/php
            dockerfile: Dockerfile
        image: laravelgis-php:latest
        ports:
            - "5173:5173"
        volumes:
            - ./:/var/www/app
        networks:
            - backend
    postgres:
        image: postgres:latest
        volumes:
            - postgres-data:/var/lib/postgresql/data
        ports:
            - "5432:5432"
        environment:
            POSTGRES_PASSWORD: 12345
            POSTGRES_USER: laravelgis
            POSTGRES_DB: laravelgis
            PGDATA: /var/lib/postgresql/data
        networks:
            - backend
    redis:
        image: redis:latest
        sysctls:
            - net.core.somaxconn=511
        ports:
            - "6379:6379"
        volumes:
            - redis-data:/data
        networks:
            - backend

• Then, add the "--host" argument to the dev script in the package.json file at the root of the project:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "dev": "vite --host",
        "build": "vite build"
    },
    "devDependencies": {
        "@alpinejs/focus": "^3.10.5",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^3.0.0"
    },
    "dependencies": {
        "ol": "^7.1.0"
    }
}

• Finally, run "docker-compose up -d" again to make sure the port 5173 is opened and run "dr npm run dev" instead of "dr npm run build":

docker-compose up -d
dr npm run dev

Now we can refresh the page one last time in the browser, and from now on Vite will auto compile our assets, and the browser will autorefresh. Stay along; in the next post, we will start storing and querying our data in a proper relational database management system with a powerful geospatial extension: PostGIS.

The commit for this post is available here: vite-asset-bundling