python-web Documentation

Curso para aprender desarrollo frontend Web con Python puro desde cero. Elaborado durante las emisiones en directo desde Twitch de MoureDev.

4,676 stars HTML HTML 1 file · ~3,341 tokens #api-rest#chackra-ui#css#docker#frontend#github-actions#postgresql#pynecone
RAW Doc

Docker & Self-Hosted Deployment Verified OCI

Deploy python-web on any server, homelab, or cloud container platform.

1-Click Terminal Command
bash (docker run) 
docker run -d --name python-web --restart always mouredev/python-web:latest

File: README.md

Python Web


Curso de 13 horas en vídeo para aprender desarrollo web con Python puro y Reflex desde cero.

Proyecto realizado durante emisiones en directo desde [Twitch](https://twitch.tv/mouredev)

Si consideras útil el curso, apóyalo haciendo "★ Star" en el repositorio. ¡Gracias!

Sobre el curso: muy importante

Desde la versión 0.4.0, Reflex utiliza Radix (en vez de Chakra) como sistema de componentes de UI. Ten en cuenta la versión que usas del framework, ya que algunos elementos han podido cambiar ligeramente. Te recomiendo que revises el código del proyecto original actualizado. A partir de la versión 0.4.0, todos los componentes de Chakra estarán en rx.chakra.

Ejemplo:

text
import reflex as rx
rx.button() # Ahora este será el botón de Radix
rx.chakra.button() # Anterior botón de Chakra

Aquí tienes un artículo con toda la información sobre la nueva versión.

Curso de Python Web: Tutorial en vídeo

Tienes un canal llamado "python" en el servidor de Discord de la comunidad para preguntar, compartir y ayudar.

Curso de Python Web Avanzado: Tutorial en vídeo

Proyecto


Durante el curso aprenderemos desarrollo web con Python puro utilizando el framework Reflex. Realizaremos un proyecto práctico que consistirá en desarrollar y publicar mi nueva web de links moure.dev (añadiéndole nuevas funcionalidades).
Todo el código está disponible para que cualquiera pueda usarlo.

Tutorial extra en vídeo (+3 horas)

Proyecto práctico extra de código libre que consistirá en desarrollar y publicar la web del Calendario de aDEViento de la comunidad. Una activdad donde repartimos cursos y libros sobre programación en Navidad.

💻 [Accede al código del proyecto extra](https://github.com/mouredev/adeviento-web)

Otros proyectos creadas con Reflex

Estas son otras webs de código libre que he desarrollado para que puedas consultar su código y funcionalidades.

Información importante y preguntas frecuentes

Todo el contenido se ha creado en directo desde Twitch, y en este repositorio podrás encontrar las clases en vídeo, el código programado, enlaces de interés y la información relevante.

  • Es un curso desde cero y no necesitas conocimientos previos sobre desarrollo web.
  • Recuerda que he creado en el Discord un canal "🐍python" para que puedas comentar lo que quieras.

Enlaces de interés

Curso de Python desde cero

Aprende Python desde sus fundamentos

Si quieres aprender desde cero, tienes gratis todos los tutoriales que he creado. Más de 44 horas desde fundamentos, frontend, backend o integración con IA.

Únete al campus de programación de la comunidad

Te presento [mouredev pro](https://mouredev.pro), mi proyecto más importante para ayudarte a estudiar programación y desarrollo de software de manera diferente.

¿Buscas un extra? Aquí encontrarás mis cursos editados por lecciones individuales, para avanzar a tu ritmo y guardar el progreso. También dispondrás de ejercicios y correcciones, test para validar tus conocimientos, examen y certificado público de finalización, soporte, foro de estudiantes, reunionnes grupales, cursos exclusivos y mucho más.

Entra en mouredev.pro y utiliza el cupón "PRO" con un 10% de descuento en tu primera suscripción.

Hola, mi nombre es Brais Moure.

Freelance full-stack iOS & Android engineer




Soy ingeniero de software desde 2010. Desde 2018 combino mi trabajo desarrollando Apps con la creación de contenido formativo sobre programación y tecnología en diferentes redes sociales como @mouredev.

Si quieres unirte a nuestra comunidad de desarrollo, aprender programación, mejorar tus habilidades y ayudar a la continuidad del proyecto, puedes encontrarnos en:




Sobre el curso: muy importante

Desde la versión 0.4.0, Reflex utiliza Radix (en vez de Chakra) como sistema de componentes de UI. Ten en cuenta la versión que usas del framework, ya que algunos elementos han podido cambiar ligeramente. Te recomiendo que revises el código del proyecto original actualizado. A partir de la versión 0.4.0, todos los componentes de Chakra estarán en rx.chakra.

Ejemplo:

text
import reflex as rx
rx.button() # Ahora este será el botón de Radix
rx.chakra.button() # Anterior botón de Chakra

Aquí tienes un artículo con toda la información sobre la nueva versión.

Tutorial

Consulta el curso de 6 horas en vídeo desde cero que muestra el proceso de desarrollo de la web.

Requisitos

Instala y crea un entorno virtual [venv](https://packaging.python.org/en/latest/guides/installing-using-pip-and-virtual-environments/) en la raíz 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

También las tienes en requirements.txt

python -m pip install -r requirements.txt

Ejecución

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 estática. Éste, en concreto, desde Vercel. Se ejecuta automáticamente desde una GitHub Action creada en el repositorio.

sh remote_build.sh

bash
cd link_bio
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 construcción de producción, 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 estáticos.

moure.dev se encuentra desplegado en Vercel.

Configuración en Vercel:

  • Se ha asociado el repositorio de GitHub al proyecto (para que cada push en la rama main desencadene un nuevo despliegue)
  • Build & Development Settings: Other
  • Root Directory: public (que contiene el empaquetado estático para producción)
  • Custom Domain: moure.dev

Backend

El fichero Dockerfile posee la configuración para generar la imagen y desplegar el backend como un contedor de Docker.
Éste, en concreto, desde Railway.

Dockerfile

yaml
FROM python:3.11

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.

Configuración en Railway:

  • Se ha asociado el repositorio de GitHub al proyecto (para que cada push en la rama main desencadene un nuevo despliegue)
  • Root Directory: /link_bio (que contiene el Dockerfile)
  • Variables: PORT=8000 (el puerto en el que escucha por defecto el backend)
  • Custom Domain: api.moure.dev

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

#api-rest Browse api-rest catalog → #chackra-ui Browse chackra-ui catalog → #css Browse css catalog → #docker Browse docker catalog → #frontend Browse frontend catalog → #github-actions Browse github-actions catalog → ⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →