DevHub

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

Índice

1. Introducción
2. Backend
3. Frontend
4. Configuración
5. Configuración de hosts
6. Entorno de desarrollo
7. Recursos
8. Créditos

Introducción

Estructura del proyecto

/
├── backend/
│   ├── .env
│   └── Dockerfile
├── frontend/
│   └── Dockerfile
└── 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: JavaScript
4. Use Vite 8 beta (Experimental)?: No
5. Install with npm and start now?: No

Configuración

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

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 el siguiente comando desde la raíz del proyecto:

docker compose up -d --build

Este comando construirá las imágenes necesarias y levantará los servicios del 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 -v

Este comando detiene los contenedores y elimina 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.js https://nodejs.org/en/download

Laravel https://laravel.com/docs/12.x/installation#creating-a-laravel-project

Vite https://vite.dev/guide/#scaffolding-your-first-vite-project

Docker https://docs.docker.com/engine/install/

Créditos

Red Cube Illustration https://www.canva.com/graphics/MAEFh59rD9c/