How to setup Laravel+Vuejs in Docker

i have some troubles to setup my app I'm using Laravel for the back and Vuejs for the front and all of this inside a Docker container in WSL I did a lot of research and can't find a solution to access to my app in my browser And i'm stuck on the default vite page

Here's my Dockerfile

FROM webdevops/php-apache:8.2-alpine

RUN apk update && \
    apk add --no-cache nodejs npm git && \
    curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

WORKDIR /app

EXPOSE 80

My docker-compose.yml

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    image: laravel-vue-app
    container_name: laravel_vue_app
    volumes:
      - ./volumes/app:/app
    ports:
      - "8080:5173"

My vite.config.js

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

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

And i've setup app.js, App.vue, app.blade.php and web.php well And of course npm run dev is on in my container

So if someone know what's happening and can explain why i'm stuck on this page this will really help me! Thanks!

Option 1: Seems like you are using Laravel with Vite. So it must be Laravel >= 8. If it is so you can use laravel/sail Package. It's very easy to setup.

Option 2: If you still wish to do it manually. I see error here in ports. You need Expose and forward 2 ports. One for the laravel backend which is usually 8000 and the other is 5173 which is for the assets built by Vite in development.

Here is quick fix for that.

In Dockerfile, Change the last 2 lines.

FROM webdevops/php-apache:8.2-alpine

RUN apk update && \
    apk add --no-cache nodejs npm git && \
    curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

WORKDIR /app

EXPOSE 8000
EXPOSE 5173

In docker-compose.yml, update the ports forwarding.

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    image: laravel-vue-app
    container_name: laravel_vue_app
    volumes:
      - ./volumes/app:/app
    ports:
      - "8000:8000"
      - "5173:5173"

Still you need to run php artisan serve and npm run dev within container to make it work. As you mentioned you did this already, website should work.