freeleaps-pub/devbox/cli

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.