Web de links de MoureDev
Proyecto desarrollado con Python y Reflex que representa un sitio web personal estilo "link in bio"
Sobre el curso: muy importante
Desde la version 0.4.0, Reflex utiliza Radix (en vez de Chakra) como sistema de componentes de UI. Ten en cuenta la version que usas del framework, ya que algunos elementos han podido cambiar ligeramente. Te recomiendo que revises el codigo del proyecto original actualizado. A partir de la version 0.4.0, todos los componentes de Chakra estaran en rx.chakra.
Ejemplo:
import reflex as rx
rx.button() # Ahora este sera el boton de Radix
rx.chakra.button() # Anterior boton de Chakra
Aqui tienes un articulo con toda la informacion sobre la nueva version.
Tutorial
Consulta el curso de 6 horas en video desde cero que muestra el proceso de desarrollo de la web.
Requisitos
Instala y crea un entorno virtual venv en la raiz del proyecto
Mac/Linux: python3 -m pip install virtualenv
Windows: py -m pip install --user virtualenv
python3 -m venv .venv
Activa el entorno virtual
Mac/Linux: source .venv/bin/activate
Windows: .\.venv\Scripts\activate
Para desactivar el entorno virtual: deactivate
Dependencias
(Con el entorno virtual activo)
pip install reflex
Tambien las tienes en requirements.txt
python -m pip install -r requirements.txt
Ejecucion
reflex run
reflex run --loglevel debug (modo debug)
Acceder a http://localhost:3000 (frontend) y a http://localhost:8000 (backend)
Despliegue
Frontend
c contiene las instrucciones necesarias para empaquetar el frontend del proyecto y desplegarlo de forma estatica. Este, en concreto, desde Vercel. Se ejecuta automaticamente desde una GitHub Action creada en el repositorio.
sh remote_build.sh
python -m venv .venv
source .venv/bin/activate
pip install --upgrade pip
pip install -r requirements.txt
rm -rf frontend
reflex init
API_URL=[URL backend, en caso de existir] reflex export --frontend-only
unzip frontend.zip -d frontend
rm -f frontend.zip
deactivate
Prepera el entorno, instala dependencias, inicializa el proyecto, crea la construccion de produccion, y la descomprime.
Existe otro script llamado local_build.sh para realizar construcciones del frontend en local. En caso de existir un backend, debe referenciarse con un valor en API_URL, como aparece en el script remote_build.sh.
El proyecto se puede desplegar en cualquier proveedor o servidor que soporte recursos estaticos.
Configuracion en Vercel:
- Se ha asociado el repositorio de GitHub al proyecto (para que cada
pushen la ramamaindesencadene un nuevo despliegue) - Build & Development Settings: Other
- Root Directory:
public(que contiene el empaquetado estatico para produccion) - Custom Domain: moure.dev
Backend
El fichero Dockerfile posee la configuracion para generar la imagen y desplegar el backend como un contedor de Docker.
Este, en concreto, desde Railway.
Dockerfile
WORKDIR /app
COPY . .
ENV VIRTUAL_ENV=/app/.venv_docker
ENV PATH="$VIRTUAL_ENV/bin:$PATH"
RUN python3.11 -m venv $VIRTUAL_ENV
RUN pip install --upgrade pip
RUN pip install --no-cache-dir -r requirements.txt
CMD reflex run --env prod --backend-only
Prepara una image con Python, instala las dependencias del proyecto e inicia el proceso que ejecuta el backend.
El proyecto se puede desplegar en cualquier proveedor o servidor que soporte Python o Docker. Incluso frontend y backend en un mismo hosting o contenedor de Docker.
api.moure.dev se encuentra desplegado en Railway.
Configuracion en Railway:
- Se ha asociado el repositorio de GitHub al proyecto (para que cada
pushen la ramamaindesencadene un nuevo despliegue) - Root Directory:
/link_bio(que contiene elDockerfile) - Variables:
PORT=8000(el puerto en el que escucha por defecto el backend) - Custom Domain: api.moure.dev