|
| 1 | +# Plantilla de WebApp con React JS y Flask API |
| 2 | + |
| 3 | +Construye aplicaciones web usando React.js para el front end y python/flask para tu API backend. |
| 4 | + |
| 5 | +- La documentación se puede encontrar aquí: https://4geeks.com/docs/start/react-flask-template |
| 6 | +- Aquí hay un video sobre [cómo usar esta plantilla](https://www.youtube.com/watch?v=qBz6Ddd2m38) |
| 7 | +- Integrado con Pipenv para la gestión de paquetes. |
| 8 | +- Despliegue rápido a Render [en solo unos pocos pasos aquí](https://4geeks.com/es/docs/start/despliega-con-render-com). |
| 9 | +- Uso del archivo .env. |
| 10 | +- Integración de SQLAlchemy para la abstracción de bases de datos. |
| 11 | + |
| 12 | +### 1) Instalación: |
| 13 | + |
| 14 | +> Si usas Github Codespaces (recomendado) o Gitpod, esta plantilla ya vendrá con Python, Node y la base de datos Posgres instalados. Si estás trabajando localmente, asegúrate de instalar Python 3.10, Node. |
| 15 | +
|
| 16 | +Se recomienda instalar el backend primero, asegúrate de tener Python 3.10, Pipenv y un motor de base de datos (se recomienda Posgres). |
| 17 | + |
| 18 | +1. Instala los paquetes de python: `$ pipenv install` |
| 19 | +2. Crea un archivo .env basado en el .env.example: `$ cp .env.example .env` |
| 20 | +3. Instala tu motor de base de datos y crea tu base de datos, dependiendo de tu base de datos, debes crear una variable DATABASE_URL con uno de los valores posibles, asegúrate de reemplazar los valores con la información de tu base de datos: |
| 21 | + |
| 22 | +| Motor | DATABASE_URL | |
| 23 | +| --------- | --------------------------------------------------- | |
| 24 | +| SQLite | sqlite:////test.db | |
| 25 | +| MySQL | mysql://username:password@localhost:port/example | |
| 26 | +| Postgres | postgres://username:password@localhost:5432/example | |
| 27 | + |
| 28 | +4. Migra las migraciones: `$ pipenv run migrate` (omite si no has hecho cambios en los modelos en `./src/api/models.py`) |
| 29 | +5. Ejecuta las migraciones: `$ pipenv run upgrade` |
| 30 | +6. Ejecuta la aplicación: `$ pipenv run start` |
| 31 | + |
| 32 | +> Nota: Los usuarios de Codespaces pueden conectarse a psql escribiendo: `psql -h localhost -U gitpod example` |
| 33 | +
|
| 34 | +### Deshacer una migración |
| 35 | + |
| 36 | +También puedes deshacer una migración ejecutando |
| 37 | + |
| 38 | +```sh |
| 39 | +$ pipenv run downgrade |
| 40 | +``` |
| 41 | + |
| 42 | +### Población de la tabla de usuarios en el backend |
| 43 | + |
| 44 | +Para insertar usuarios de prueba en la base de datos, ejecuta el siguiente comando: |
| 45 | + |
| 46 | +```sh |
| 47 | +$ flask insert-test-users 5 |
| 48 | +``` |
| 49 | + |
| 50 | +Y verás el siguiente mensaje: |
| 51 | + |
| 52 | +``` |
| 53 | + Creating test users |
| 54 | + |
| 55 | + |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | + Users created successfully! |
| 60 | +``` |
| 61 | + |
| 62 | +### **Nota importante para la base de datos y los datos dentro de ella** |
| 63 | + |
| 64 | +Cada entorno de Github Codespace tendrá **su propia base de datos**, por lo que si estás trabajando con más personas, cada uno tendrá una base de datos diferente y diferentes registros dentro de ella. Estos datos **se perderán**, así que no pases demasiado tiempo creando registros manualmente para pruebas, en su lugar, puedes automatizar la adición de registros a tu base de datos editando el archivo ```commands.py``` dentro de la carpeta ```/src/api```. Edita la línea 32 de la función ```insert_test_data``` para insertar los datos según tu modelo (usa la función ```insert_test_users``` anterior como ejemplo). Luego, todo lo que necesitas hacer es ejecutar ```pipenv run insert-test-data```. |
| 65 | + |
| 66 | +### Instalación manual del Front-End: |
| 67 | + |
| 68 | +- Asegúrate de estar usando la versión 20 de node y de que ya hayas instalado y ejecutado correctamente el backend. |
| 69 | + |
| 70 | +1. Instala los paquetes: `$ npm install` |
| 71 | +2. ¡Empieza a codificar! inicia el servidor de desarrollo de webpack `$ npm run start` |
| 72 | + |
| 73 | +## ¡Publica tu sitio web! |
| 74 | + |
| 75 | +Esta plantilla está 100% lista para desplegarse con Render.com y Heroku en cuestión de minutos. Por favor, lee la [documentación oficial al respecto](https://4geeks.com/docs/start/deploy-to-render-com). |
| 76 | + |
| 77 | +### Contribuyentes |
| 78 | + |
| 79 | +Esta plantilla fue construida como parte del [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) de 4Geeks Academy por [Alejandro Sanchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Descubre más sobre nuestro [Curso de Desarrollador Full Stack](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer) y [Bootcamp de Ciencia de Datos](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning). |
| 80 | + |
| 81 | +Puedes encontrar otras plantillas y recursos como este en la [página de github de la escuela](https://github.com/4geeksacademy/). |
0 commit comments