Docker: Laravel NGINX MySQL (Local)

Have you exposed Vite's dev server port in your docker-compose.yml? Also, how is your vite.config.js set up? It might help if you could share some of your configuration files.

@remim thanks for taking your time to reply. I really appreciate it. I'll post my docker-compose.yml and vite.config.js

services:
    # PHP service (for Laravel)
    app:
        build:
            context: .
            dockerfile: Dockerfile
            args:
                user: developer
                uid: 1000
        container_name: app
        volumes:
            - .:/var/www/
        networks:
            - portfolio_network
        working_dir: /var/www/
        restart: unless-stopped
        ports:
            - "9000:9000"
        command: sh -c "chown -R www-data:www-data /var/www/storage /var/www/bootstrap/cache && chmod -R 777 /var/www/storage && php-fpm"

    # Nginx service
    nginx:
        image: nginx:latest
        container_name: nginx
        volumes:
            - .:/var/www
            - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
        ports:
            - "80:80"
        depends_on:
            - app
        networks:
            - portfolio_network
        restart: unless-stopped

    # MySQL service
    mysql:
        image: mysql:latest
        container_name: mysql
        environment:
            MYSQL_ROOT_PASSWORD: MySQLPass
            MYSQL_DATABASE: portfolio_db
            MYSQL_USER: portfolio_user
            MYSQL_PASSWORD: portfolio_password
        volumes:
            - mysql_data:/var/lib/mysql
            - ./mysql/my.cnf:/etc/mysql/conf.d/my.cnf  # Mount the new config
        networks:
            - portfolio_network
        restart: unless-stopped


volumes:
    mysql_data:

networks:
    portfolio_network:
        driver: bridge

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Still looking for guidance or help

You need to:

1. Expose Vite’s development server to your host machine.
2. Configure Vite to accept requests from outside the container.

Step 1: Update docker-compose.yml

Modify the app service to expose Vite’s default port (5173) and ensure it's properly bound to the host.

    app:
		...
        ports:
            - "9000:9000"
            - "5173:5173"  # Expose Vite's port
		...

Step 2: Update vite.config.js

Modify vite.config.js to ensure it's accessible from your host.

...
export default defineConfig({
    server: {
        host: '0.0.0.0', // Listen on all network interfaces (required for Docker)
        watch: {
            usePolling: true, // Ensures file changes are detected inside Docker
        },
        strictPort: true,
        port: 5173, // Ensure this matches the exposed port in docker-compose.yml
        hmr: {
            host: 'localhost', // Ensures HMR works when accessed via localhost
        },
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
       ...
    ],
});

How to Start Everything:

# 1. Start containers
docker-compose up --build -d

# 2. Run Vite inside the container
docker exec -it app npm run dev

# 3. Open http://localhost in Safari (HMR should work)

There are more optimized ways to use Docker with Laravel, but given your current setup, this approach is the quickest to get things running.

If you're looking for a more seamless integration, you can explore detailed guides on Laracasts:

• https://laracasts.com/series/the-docker-tutorial
• https://laracasts.com/discuss/channels/guides/getting-started-with-laravel-and-docker

You can also find plenty of resources with a quick Google search.