Wsl, docker and expose vite

To solve the issue of not having access to assets when running npm run dev with Vite in a Docker environment, you need to ensure that Vite's development server is properly exposed and accessible from your host machine. Here are the steps to achieve this:

1. Update the Vite Configuration: Ensure that the Vite server is configured to listen on all network interfaces and that the correct port is specified.

2. Expose the Correct Port in Docker: Make sure the Docker service for your Node.js application exposes the port that Vite uses (default is 5173).

3. Update Docker Compose Configuration: Ensure that the npm service in your docker-compose.yml file is correctly configured to expose the Vite port.

Here is the updated solution:

Step 1: Update vite.config.js

Ensure that the Vite server is configured to listen on all network interfaces and specify the correct port:

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

export default defineConfig({
  plugins: [
    vue(),
    laravel({
      input: [
        'resources/js/app.js',
      ],
      refresh: true,
    }),
  ],
  server: {
    host: "0.0.0.0",
    port: 5173, // Ensure this matches the exposed port
    hmr: {
      host: 'localhost', // or your Docker host IP
    },
  },
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
      '@': path.resolve(__dirname, './resources/sass'),
    },
  },
});

Step 2: Update docker-compose.yml

Ensure that the npm service exposes the Vite port (5173) and maps it correctly:

version: "3.9"

networks:
  dev:
    external: true
    name: dev

services:
  nginx:
    ports:
      - "5173:5173"
    build:
      context: ./.docker
      dockerfile: nginx.dockerfile
      args:
        - UID=${UID:-1000}
        - GID=${GID:-1000}
    volumes:
      - ./src:/var/www:delegated
    depends_on:
      - php-fpm
      - memcached
      - mysql
    networks:
      - dev
    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=dev"
      - "traefik.http.routers.example-nginx.entrypoints=web"
      - "traefik.http.routers.example-nginx.rule=Host(`example.test`)"

  mysql:
    image: mysql:8.0
    hostname: example-mysql
    command: --default-authentication-plugin=mysql_native_password --collation-server=utf8_unicode_ci --character-set-server=utf8
    restart: unless-stopped
    tty: true
    ports:
      - "3308:3306"
    volumes:
      - data_volume:/var/lib/mysql
    environment:
      MYSQL_DATABASE: example
      MYSQL_USER: homestead
      MYSQL_PASSWORD: secret
      MYSQL_ROOT_PASSWORD: secret
      SERVICE_TAGS: dev
      SERVICE_NAME: mysql
    networks:
      - dev

  php-fpm:
    hostname: example-php-fpm
    build:
      context: ./.docker
      dockerfile: php.dockerfile
      args:
        - UID=${UID:-1000}
        - GID=${GID:-1000}
    ports:
      - "9000:9000"
    volumes:
      - ./src:/var/www:delegated
    networks:
      - dev

  memcached:
    image: memcached:1.6.22
    restart: unless-stopped
    networks:
      - dev
    ports:
      - 11211:11211

  composer:
    build:
      context: ./.docker
      dockerfile: php.dockerfile
      args:
        - UID=${UID:-1000}
        - GID=${GID:-1000}
    volumes:
      - ./src:/var/www
    working_dir: /var/www
    depends_on:
      - php-fpm
    entrypoint: [ 'composer']
    networks:
      - dev

  npm:
    build:
      context: ./.docker
      dockerfile: node.dockerfile
    volumes:
      - ./src:/var/www
    ports:
      - "5173:5173" # Ensure this matches the Vite port
    working_dir: /var/www
    entrypoint: [ 'npm', 'run', 'dev' ]
    networks:
      - dev

volumes:
  data_volume:

Step 3: Update node.dockerfile

Ensure that the Dockerfile for the Node.js service exposes the correct port:

FROM node:16-alpine

USER node

EXPOSE 5173

CMD ["npm", "run", "dev"]

Summary

By ensuring that the Vite server is configured to listen on all network interfaces and that the correct port is exposed and mapped in your Docker configuration, you should be able to access the assets when running npm run dev. This setup allows the Vite development server to be accessible from your host machine.