DevHub

Índice

1. Introducción
2. Estructura del proyecto
3. Clona el repositorio
4. Configuración del proyecto
5. Configuración de hosts
6. Entorno de desarrollo
7. Recursos
8. Créditos

Introducción

¡Tu espacio para registrar, mostrar y destacar tus proyectos, llevando tu desarrollo personal al siguiente nivel!

Este proyecto se ha desarrollado en un sistema Linux. Para obtener más información sobre el sistema, visite el repositorio Dotfiles.

Estructura del proyecto

/
├── backend/
│   ├── .env
│   └── Dockerfile
├── database/
|   └── devhub.drawio.svg
├── demo/
|   └── package.json
├── docs/
|   └── README.md
├── frontend/
│   └── Dockerfile
├── nginx/
│   ├── conf.d
│   │   └── default.conf
│   └── Dockerfile
├── CONTRIBUTING
├── LICENSE
├── .env
└── docker-compose.yaml

Backend

laravel new backend

Detalles de la instalación del backend:

1. Which starter kit would you like to install? > None
2. Which testing framework do you prefer? > Pest
3. Do you want to install Laravel Boost to improve AI assisted coding? > No
4. Which database will your application use? > PostgreSQL
5. Default database updated. Would you like to run the default database migrations? > No
6. Would you like to run npm install and npm run build? > No

Frontend

npm create vite@latest

Detalles de la instalación del frontend:

1. Project name: frontend
2. Select a framework: React
3. Select a variant: TypeScript
4. Install with npm and start now?: No

Clona el repositorio

Abre una terminal en el directorio donde almacenas tus repositorios y clónalo con el siguiente comando:

# HTTPS
git clone https://github.com/PRW-DAW/DevHub.git
cd DevHub/

# SSH
git clone git@github.com:PRW-DAW/DevHub.git
cd DevHub/

Configuración del proyecto

Antes de ejecutar el proyecto, crea el archivo de variables de entorno para Docker:

cp .env.example .env
nano .env

Luego, edita el archivo .env y configura las credenciales:

# Postgres
POSTGRES_DB=postgres
POSTGRES_USER=fjrodafo
POSTGRES_PASSWORD=password
#POSTGRES_PORT=5432:5432

# Laravel
#LARAVEL_PORT=8000:8000

# React + Vite
#REACT_VITE_PORT=5173:5173

# Nginx
NGINX_PORT=80:80

Además, crea el archivo de variables de entorno para Laravel:

cp backend/.env.example backend/.env
nano backend/.env

Luego, edita el archivo .env y configura las credenciales de la base de datos utilizada en Docker:

APP_NAME="DevHub | API"

DB_CONNECTION=pgsql
DB_HOST=db
DB_PORT=5432
DB_DATABASE=postgres
DB_USERNAME=fjrodafo
DB_PASSWORD=password

SANCTUM_STATEFUL_DOMAINS=devhub.com
FRONTEND_URL=http://devhub.com
SESSION_DOMAIN=devhub.com

[!IMPORTANT]

DB_HOST debe ser db, ya que corresponde al nombre del servicio definido en docker-compose.yml.

Configuración de hosts

Para acceder a DevHub con un dominio local personalizado, agregue las siguientes líneas a su archivo /etc/hosts:

127.0.0.1	devhub.com	www.devhub.com
127.0.0.1	devhub.pro	www.devhub.pro
127.0.0.1	api.devhub.com	www.api.devhub.com
127.0.0.1	api.devhub.pro	www.api.devhub.pro

Entorno de desarrollo

Este proyecto utiliza contenedores Docker para facilitar el entorno de desarrollo local.

Para iniciar el entorno de desarrollo, asegúrate de tener instalado Docker.

Luego ejecuta los siguientes comandos desde la raíz del proyecto:

docker compose build

[!NOTE]

Si desea crear la imagen localmente, descomente la sección build en docker-compose.yaml y ejecute docker compose build. De lo contrario, pase directamente al siguiente paso.

Levanta los contenedores:

docker compose up -d

El primer comando construirá las imágenes necesarias y el segundo levantará los servicios en segundo plano.

Una vez que los contenedores estén activos, puedes acceder a los servicios desde tu navegador:

• Backend (Laravel API): http://api.devhub.com/
• Frontend (React + Vite): http://devhub.com/

Para finalizar el entorno de desarrollo, ejecuta el siguiente comando desde la raíz del proyecto:

docker compose down

Este comando detiene los contenedores sin eliminar los datos locales del desarrollo.

[!NOTE]

La primera ejecución puede tardar algunos minutos debido a la instalación de dependencias.

Si realizas cambios en el código fuente, estos se reflejarán automáticamente gracias a los volúmenes configurados en Docker.

Recursos

Node · Laravel · Vite · Docker

Créditos

Red Cube Illustration