Getting Vite asset bundling to work with Laravel and Docker

A free screencast (video) course is available for this post but you need to be signed in order to view it, you can sign in here if you already have an account or register here if you don't have one.

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

Vite asset bundling

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

First published 1 year ago
Latest update 1 year ago
Vesurathan
Posted by Vesurathan 1 year ago

i have done all of the instruction that you provide and its been very helpful to me to countinue this study but in this session i faced an small error like when i chnage "dev" : "vite --host" the styleing files and the js files are note loaed in to the webapplication its showing the webpage with out the css and js files how can i solve them please help me to find an solution for this error

-by Viswa


webgisdev
Posted by webgisdev 1 year ago

Hi Vesurathan,

Make sure the head section of your resources/views/layouts/app.blade.php file looks exactly like this (order is important):


    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="csrf-token" content="{{ csrf_token() }}">



        <title>{{ config('app.name', 'Laravel') }}</title>



        <!-- Fonts -->

        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">



        <!-- Scripts -->

        @stack('styles')

        @stack('scripts')

        @vite(['resources/css/app.css', 'resources/js/app.js'])



        <!-- Styles -->

        @livewireStyles

    </head>

Hope it help!

Vesurathan
Posted by Vesurathan 11 months ago

yeah i did it same as this one but the styles of the jetstream registration and the login and the map styles are not working how can i add them

ckayhernandez
Posted by ckayhernandez 8 months ago

After changing from vite to vite --host

I have the following error

dashboard:14

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

dashboard:14

GET http://[::]:5173/resources/css/components/map.css net::ERR_ADDRESS_INVALID

dashboard:14

GET http://[::]:5173/resources/js/components/map.js net::ERR_ADDRESS_INVALID

dashboard:14

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

dashboard:14

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

No response yet
You need to be signed in to post comments, you can sign in here if you already have an account or register here if you don't.