Docker Compose Laravel Setup

services:
app:
build:
context: .
dockerfile: Dockerfile
container_name: laravel_app
volumes:
– ./shareyourthoughts:/var/www/html
networks:
– laravel_network
depends_on:
– db
ports:
– "8080:80" # Change this to the desired host port

db:
image: mysql:8.0
container_name: laravel_db
restart: always
environment:
MYSQL_DATABASE: laravel
MYSQL_USER: laravel
MYSQL_PASSWORD: password
MYSQL_ROOT_PASSWORD: rootpassword
volumes:
– db_data:/var/lib/mysql
– ./init-scripts:/docker-entrypoint-initdb.d
networks:
– laravel_network

adminer:
image: adminer
container_name: adminer
restart: always
ports:
– "8081:8080" # Change this to the desired host port for Adminer
networks:
– laravel_network

node:
image: node:latest
container_name: node
working_dir: /var/www/html/resources/js # Set working directory to the root of your Laravel app
volumes:
– ./shareyourthoughts:/var/www/html # Mount the entire Laravel project
command: ["npm", "run", "dev"] # Keep the container running
ports:
– "5173:5173" # Expose Vite's port
networks:
– laravel_network
environment:
– VITE_HOST=0.0.0.0

networks:
laravel_network:
driver: bridge

volumes:
db_data:

1. **Volumes**:
– Ensure that your local `./shareyourthoughts` directory contains your Laravel app, including the `Dockerfile`.
– The `db_data` volume is set up to persist MySQL data, which is good practice.

2. **Node.js Service**:
– You're using Node.js to run Vite. The `command` to run `npm run dev` will start the Vite server. Make sure your `package.json` in `./shareyourthoughts` has the appropriate scripts set up.
– The `working_dir` is set to `/var/www/html/resources/js`, which is specific to your JS files. If your main `package.json` file is at the root of your Laravel project, you might want to adjust this to `/var/www/html`.

3. **Ports**:
– The ports for your app (`8080:80`), Adminer (`8081:8080`), and Vite (`5173:5173`) are correctly configured. Just ensure that these ports don't conflict with other services running on your host machine.

4. **Database Initialization**:
– You have an `init-scripts` directory mapped to `/docker-entrypoint-initdb.d`. Ensure this directory contains any SQL scripts you want to run during the database initialization.

5. **Network**:
– All services are on the same `laravel_network`, which is perfect for communication between them.

6. **Environment Variables**:
– The `VITE_HOST` environment variable is correctly set to `0.0.0.0`, allowing access from outside the container.

### Example Adjustments

If you need to adjust the `node` service's `working_dir`, it would look like this:

node:
    image: node:latest
    container_name: node
    working_dir: /var/www/html  # Change this to the root of your Laravel app
    volumes:
      - ./shareyourthoughts:/var/www/html
    command: ["npm", "run", "dev"]
    ports:
      - "5173:5173"
    networks:
      - laravel_network
    environment:
      - VITE_HOST=0.0.0.0

### Running Your Docker Compose

To start your containers, navigate to the directory containing your `docker-compose.yml` file and run:

docker-compose up -d

This command will run your containers in detached mode. You can check the logs with:

docker-compose logs -f

If you encounter any issues, feel free to ask for help!

### 1. Ensure Hot Module Replacement (HMR) is Enabled
If you're using Vite with Vue.js, make sure that HMR is enabled in your Vite configuration. HMR allows for live updates without needing to refresh the entire page or restart the server.

Check your `vite.config.js` file to confirm HMR is enabled:

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0', // Allow access from outside the container
    port: 5173, // Match the port exposed in Docker Compose
    strictPort: true, // Fail if the port is already in use
  },
});

### 2. Check Volume Mounts
Make sure that the volume mount for your Node.js container is set up correctly so that changes in your local `./shareyourthoughts` directory reflect in the container:

node:
  image: node:latest
  container_name: node
  working_dir: /var/www/html
  volumes:
    - ./shareyourthoughts:/var/www/html  # Ensure this is correct

### 3. Confirm Vite is Running
Ensure that the Vite server is running and accessible. You can check this by navigating to `http://localhost:5173` in your browser.

### 4. Browser Caching
Sometimes, browser caching can cause issues with reflecting changes. Try clearing your browser cache or doing a hard refresh (Ctrl + F5).

### 5. Check for Errors
Check the console in your browser's developer tools and the terminal where you started your Docker containers for any errors. If there are issues with your Vue.js code, it may not compile correctly, which can prevent changes from appearing.

### 6. Manual Restart as a Last Resort
If none of the above steps resolve the issue, you might need to restart your Node.js container:

docker-compose restart node

### Summary
Typically, with Vite and HMR, you shouldn't need to run `docker-compose up` each time you make a change. If you're still having issues after checking the points above, feel free to share any error messages or behaviors you're encountering!