Docker and Vite running Getting problem loading page: Failed to load resource: the server responded with a status of 404 (Not Found) for "http://localhost:3000/main.js"

Docker and Vite running Getting problem loading page: Failed to load resource: the server responded with a status of 404 (Not Found) for "http://localhost:3000/main.js"

When trying to run a Docker container with a Vite application, you might encounter a 404 error when loading the main JavaScript file. This issue can occur due to various reasons, such as misconfigured Dockerfiles, incorrect network settings, or incorrect Vite settings. In this answer, we will discuss some possible solutions to help you resolve this issue.

1. Check the Vite configuration

The first step is to ensure that the Vite configuration is correct. Check the vite.config.js file in your project directory and make sure that the base option is set correctly. The base option specifies the base URL for serving static assets. In most cases, it should be set to an empty string '' or '/'. However, if your application is running inside a Docker container, you might need to set it to the container's IP address or hostname and the port number where Vite is running.

For example, if your Docker container is running on port 3000, and its IP address is 172.17.0.2, then the base option should be set as follows:

module.exports = {
  base: 'http://172.17.0.2:3000/',
  // other configurations
}

2. Expose the correct port in Dockerfile

Make sure that the Dockerfile exposes the correct port where Vite is running. By default, Vite listens on port 3000. So, you should expose this port in your Dockerfile as follows:

FROM node:14

WORKDIR /app

COPY package.json yarn.lock ./
RUN yarn install

COPY . .

EXPOSE 3000

CMD ["yarn", "start"]

3. Map the port in Docker run command

When running the Docker container, make sure that you map the container's port to the host's port. This can be done using the -p option in the docker run command:

docker run -p 3000:3000 my-image

4. Check the network settings

If none of the above solutions work, then it's possible that there's an issue with the network settings. Make sure that the Docker container can access the internet and that it can communicate with the host. You can test this by running a simple curl command inside the container:

docker run --rm -it alpine sh -c 'apk add --no-cache curl && curl https://www.google.com'

If this command fails, then there's an issue with the network settings, and you should check your Docker network configuration.

5. Use a reverse proxy

If your application is running behind a reverse proxy or load balancer, then you might need to configure Vite to work with it. You can do this by setting the server.proxy option in the vite.config.js file:

module.exports = {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        ws: true,
        changeOrigin: true,
      },
    },
  },
  // other configurations
}

This will tell Vite to proxy all requests that match the /api prefix to the specified target URL.

In conclusion, when encountering a 404 error while running a Docker container with a Vite application, you should check the Vite configuration, expose the correct port in the Dockerfile, map the port in the docker run command, check the network settings, and use a reverse proxy if necessary. By following these steps, you should be able to resolve the issue and get your application running correctly inside the Docker container.