El "Calendario de aDEViento" es una actividad en la que cada día (durante el adviento) se sortea un regalo relacionado con programación y desarrollo de software (libros, cursos…). Su finalidad es ayudar a compartir conocimiento y fomentar el aprendizaje en comunidad.
Visita https://adviento.dev
Desarrollo realizado en directo desde Twitch
- Introducción
- Lección 1 - Configuración
- Lección 2 - Navbar
- Lección 3 - Header
- Lección 4 - Footer
- Lección 5 - Instructions
- Lección 6 - Author
- Lección 7 - Partners
- Lección 8 - Calendar
- Lección 9 - Repository
- Lección 10 - Snow
- Lección 11 - Deploy
- Conclusiones
Tienes un canal llamado "python" en el servidor de Discord de la comunidad para preguntar, compartir y ayudar.
Esta es la estructura general del proyecto.
- adeviento_web: código fuente principal
- adeviento_web.py: index del sitio web
- constants.py: constantes utilizadas en el sitio
- styles: directorio de estilos (css, colores y fuentes)
- views: directorio de vistas (secciones gráficas)
- components: directorio de componentes (elementos gráficos con menor entidad que una vista)
- assets: recursos gráficos y utilidades JavaScript (nive y cuenta atrás)
- rxconfig.py: configuración principal del proyecto (por defecto)
- requirements.txt: dependencias del proyecto para su ejecución
- assets: recursos gráficos y utilidades JavaScript (nive y cuenta atrás)
- build.sh: script de generación estática de la web para producción
- [generado] public: empaquetado estático del proyecto que se despliega en producción (HTML, CSS, JS e imágenes)
-
Haz un
Fork
del repositorio. -
Clona ese repositorio en tu máquina local.
git clone https://github.com/<USERNAME>/adeviento-web.git
-
Navega al directorio del proyecto.
cd adeviento
-
Crea un entorno virtual.
python3 -m venv venv
-
Activa el entorno virtual.
source venv/bin/activate
-
Instala las dependencias.
python -m pip install -r requirements.txt
-
Inicializa el proyecto de Reflex.
reflex init
-
Ejecuta el proyecto en local.
reflex run
Podrás acceder a él entrando en la url
http://localhost:3000/
desde el navegador.
Tienes más la información sobre Reflex en su documentación oficial.
Para realizar el despliegue del proyecto se ha creado un archivo build.sh
que se encarga de ejecutar el flujo necesario para generar el directorio public
con todos los recursos estáticos que necesita el servidor web.
Todo el proceso de empaquetado para producción podría ser delegado en el servidor, pero el repositorio cuenta siempre con el directorio public
para que así puedas revisar el contenido estático de la web sin necesidad de ejecutar el script build.sh
.
source .venv/bin/activate
pip install --upgrade pip
pip install -r requirements.txt
reflex init
reflex export --frontend-only
rm -fr public
unzip frontend.zip -d public
rm -f frontend.zip
deactivate
Básicamente, prepera el entorno, instala dependencias, inicializa el proyecto, crea la construcción de producción, y la descomprime.
El proyecto se puede desplegar en cualquier proveedor o servidor que soporte recursos estáticos.
adviento.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 ramamain
desencadene un nuevo despliegue) - Build & Development Settings: Other
- Root Directory:
public
(que contiene el empaquetado estático para producción) - Custom Domain: adviento.dev
- Lenguaje: Python
- Framework: Reflex
- CSS: NES.css
- Fuente: Press Start 2P
- Hosting: Vercel
Curso gratis para aprender desarrollo frontend Web con Python puro desde cero con Reflex. Las tecnologías usadas para desarrollar el proyecto del "Calendario de aDEViento". También tengo un curso de Python desde cero para principiantes.
Si quieres unirte a nuestra comunidad de desarrollo, aprender programación de Apps, mejorar tus habilidades y ayudar a la continuidad del proyecto, puedes encontrarnos en:
Soy ingeniero de software desde hace más de 13 años. Desde hace 5 años combino mi trabajo desarrollando Apps con creación de contenido formativo sobre programación y tecnología en diferentes redes sociales como @mouredev.