fjrodafo/devhub-frontend repository overview

⁠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

/
├── docs/
|   ├── _config.yaml
|   ├── CODE_OF_CONDUCT.md
|   ├── README.md
|   └── SECURITY.md
├── backend/
│   ├── .env
│   └── Dockerfile
├── frontend/
│   └── 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

# SSH
git clone [email protected]:PRW-DAW/DevHub.git

⁠Configuración del proyecto

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

cp .env.example .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

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

⁠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
docker compose up -d

El primer comando construirá las imágenes necesarias y el segundo levantará los servicios backend y frontend 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 y elimina los datos locales del desarrollo.

⁠Recursos

Node⁠ · Laravel⁠ · Vite⁠ · Docker⁠

⁠Créditos

Red Cube Illustration⁠