# DevBox Frontend Development Environment (with Nginx Reverse Proxy)

This document explains how to use the `devbox` script to set up a local development environment containing two frontend applications (Vue3 and Nuxt) with Nginx reverse proxy.

## Purpose

In standard development workflow, `pnpm run dev` launches two frontend applications simultaneously:

1. **Vue3 Application (freeleaps):** Listens on `http://localhost:5173` inside the container by default.
2. **Nuxt Application (nuxt-front):** Listens on `http://localhost:3001` inside the container with base URL set to `/home/`.

To access both applications through a **single port** from outside the container, we introduced Nginx as a reverse proxy.

## Nginx Configuration

Nginx runs inside the `devbox` container and routes requests to the correct internal frontend application based on the access path.

* **Configuration File Location:**
  * During init_compile_env initialization, the script looks for `/home/devbox/freeleaps/frontend/devbox_nginx.conf`.
  * If found, this file will be copied to `/etc/nginx/nginx.conf` inside the container.
* **Proxy Rules:**
  * Requests to `http://<host machine address>:<Nginx port>/` will be proxied to `http://localhost:5173/` (Vue3 app) inside the container.
  * Requests to `http://<host machine address>:<Nginx port>/home/` will be proxied to `http://localhost:3001/home/` (Nuxt app) inside the container.

## Port Configuration

You can configure relevant ports through `devbox` command parameters:

* **`--devbox-nginx-port <port number>`:**
  * Specifies the port on the **host machine** for accessing the Nginx reverse proxy.
  * **Default: `8888`**.
  * This is the port you'll use to access frontend applications from your browser.

## Git Branch Selection

During environment initialization, you can specify which Git branch to check out:

* **Interactive Mode:**
  When running `./devbox`, the script will prompt you to enter a branch name (defaults to `main`).

The script will attempt to check out the specified branch. If checkout fails (e.g., remote branch doesn't exist), it will fall back to the `main` branch.

## Accessing Applications

After successful environment startup, access the applications from your **host machine** browser:

* **Vue3 Application:** `http://localhost:<Nginx port>/` (e.g.: `http://localhost:8888/`)
* **Nuxt Application:** `http://localhost:<Nginx port>/home/` (e.g.: `http://localhost:8888/home/`)

Where `<Nginx port>` is the port specified via `--devbox-nginx-port`, defaulting to `8888`.