Vite manifest not found dir structure change with laravel-vite-plugin

Hello everyone,

I read a lot of usefull information on this forum, thank you for that. I couldn't find the problem i'm currently facing. After couple of hours of trying, i'd figure: lets try to ask a question on Laracasts.

Please note: with the regular directory structure, everything works fine.

I changed my directory structure from regular (projectfiles in root and a public directory) to the following directory structure for my Laravel 11 with Vue3 project:

root
- backend
- frontend
- public
Dockerfile
Dockerfile.node
docker-compose.yml
nginx.conf

With Docker i'm creating containers for the local development environment. Everything works, Laravel works, the Dockerfile.node works. The contents of my Dockerfile.node file:

# Set the base image
FROM node:20

# Set working directory
WORKDIR /var/www/frontend/

# Copy `package.json` and `package-lock.json`
COPY ./frontend/package*.json ./

# Install project dependencies
RUN npm install

# Copy project files into the docker image
COPY . .

# Expose the port Vite runs on
EXPOSE 3000

# Start the Vite server
CMD ["npm", "run", "dev"]

This starts the container for HMR (Hot Module Replacement).

This works. My vite.config.js is as following:

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

export default defineConfig({
    server: {
        hmr: {
            host: "localhost",
        },
        port: 3000,
        host: true,
    },
    plugins: [
        vue(),
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
            publicDirectory: '../frontend',
        }),
    ],
    resolve: {
        alias: {
            'vue' : "vue/dist/vue.esm-bundler.js"
        }
    }
});

Now when I start all Docker containers, everything starts. The node is running, Laravel is working. When I try to call my Vue3 app, it gives me the following error message:

Vite manifest not found at: /var/www/frontend/public/build/manifest.json

The publicDirectory is set, it successfully loads 'hot' which is needed for the project from /frontend/hot - but it tries to find the manifest.json file in /frontend/public/build/ instead of /frontend/build/. Does anyone see what i'm missing here?

What i've tried is to set output to the ../frontend/build directory and some other stuff what isn't working and ChatGPT suggested me to do.

Thank you in advance, i'm appreciating every reply.

narf

2 years ago

Level 1

I found out that in development mode, Vite is not creating a build dir. I tested locally now and it is only creating a 'build' directory when the cmd 'npm run build' is being used. So the directory structure change, made Vite somehow look for the manifest file, while it is not being required in the originel directory structure. What am I missing here? Something with paths or maybe Dockerfile volumes? Please advice, I am in the dark here.

narf

2 years ago

Level 1

I'm getting this error in Docker now:

2024-04-20 11:54:27   ➜  Local:   localhost:5173
2024-04-20 11:54:27   ➜  Network: use --host to expose
2024-04-20 11:54:37 npm ERR! path /var/www/frontend
2024-04-20 11:54:37 npm ERR! command failed
2024-04-20 11:54:37 npm ERR! signal SIGTERM
2024-04-20 11:54:37 npm ERR! command sh -c vite

2024-04-20 11:54:37 
2024-04-20 11:54:37 npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-04-20T09_54_27_718Z-debug-0.log
2024-04-20 11:54:38 
2024-04-20 11:54:38 > dev
2024-04-20 11:54:38 > vite
2024-04-20 11:54:38 
2024-04-20 11:54:38 
2024-04-20 11:54:38   VITE v5.1.6  ready in 200 ms
2024-04-20 11:54:38 
2024-04-20 11:54:38   ➜  Local:   localhost:5173/
2024-04-20 11:54:38   ➜  Network: use --host to expose

^^^ It does start, but probably not good since it's not working probably, missing the manifest.json file. There is no usefull information about this in the log file.

Docker.node:

# Set the base image node:20
FROM node:20


# Set working directory
WORKDIR /var/www

RUN mkdir /var/www/frontend

# Copy package.json and package-lock.json
COPY ./frontend/package*.json ./frontend

#RUN npm cache clean --force

WORKDIR /var/www/frontend

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY ./frontend .

# Expose port
EXPOSE 3000

# Command to run your application
CMD ["npm", "run", "dev"]

docker-compose.yml:


    node:
        #platform: linux/arm64/v8 #this line is optional if you are using Mac Silicon chip (M1/M2/M3)
        build:
            context: .
            dockerfile: Dockerfile.node
        image: shape_laravel_node
        container_name: shape_laravel_node
        ports:
            - "3000:3000"
        environment:
            - CHOKIDAR_USEPOLLING=true #added to make HMR work, can also be done in vite.config.js (commented this section out)
        restart: unless-stopped
        working_dir: /var/www/frontend
        volumes:
            - .:/var/www/frontend
            - node_modules:/var/www/frontend/node_modules
        networks:
            - app-network

narf

2 years ago

Level 1

Please help me, i will pay for your time!

Please or to participate in this conversation.