Skip to content

Commit 90b70f1

Browse files
committed
Resolved conflict
2 parents f7f3928 + 88c850d commit 90b70f1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+6294
-14991
lines changed

.devcontainer/Dockerfile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
FROM mcr.microsoft.com/devcontainers/python:0-3.10
1+
FROM mcr.microsoft.com/devcontainers/python:3.13
22

33
ENV PYTHONUNBUFFERED 1
44

.devcontainer/devcontainer.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,14 @@
2626
"onCreateCommand": "(cp .env.example .env || echo \".env creation failed\"); (pipenv install || echo \"pipenv install failed\"); (bash database.sh || echo \"database.sh failed\");",
2727
// Use 'postCreateCommand' to run commands after the container is created.
2828
"postCreateCommand": "python docs/assets/greeting.py both > /workspaces/.codespaces/shared/first-run-notice.txt && npm install",
29+
"customizations": {
30+
"vscode": {
31+
"extensions": [
32+
"esbenp.prettier-vscode",
33+
"ms-python.autopep8"
34+
]
35+
}
36+
},
2937

3038
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
3139
// "remoteUser": "root"

.env.example

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# This file includes global variables that will be available inside your project
2-
# 1. In the front end code you can access this variables like this: console.log(process.env.VARIABLE_NAME)
2+
# 1. In the front end code you can access this variables like this: console.log(import.meta.env.VARIABLE_NAME)
33
# 1. In the back end code you access the variable by importing os and then typing print(os.getenv('VARIABLE_NAME'))
44

55
# Back-End Variables
@@ -10,5 +10,5 @@ FLASK_DEBUG=1
1010
DEBUG=TRUE
1111

1212
# Front-End Variables
13-
BASENAME=/
14-
#BACKEND_URL=
13+
VITE_BASENAME=/
14+
#VITE_BACKEND_URL=

.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"editor.defaultFormatter": "esbenp.prettier-vscode",
44
"workbench.editorAssociations": {
55
"*.md": "vscode.markdown.preview.editor"
6+
},
7+
"[javascriptreact]": {
8+
"editor.defaultFormatter": "vscode.typescript-language-features"
69
}
710
}

Pipfile

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ verify_ssl = true
77

88
[packages]
99
flask = "*"
10-
sqlalchemy = "==1.4.46"
1110
flask-sqlalchemy = "*"
1211
flask-migrate = "*"
1312
flask-swagger = "*"
@@ -20,9 +19,10 @@ flask-admin = "*"
2019
typing-extensions = "*"
2120
flask-jwt-extended = "==4.6.0"
2221
wtforms = "==3.1.2"
22+
sqlalchemy = "*"
2323

2424
[requires]
25-
python_version = "3.10"
25+
python_version = "3.13"
2626

2727
[scripts]
2828
start="flask run -p 3001 -h 0.0.0.0"

Pipfile.lock

Lines changed: 418 additions & 342 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

README.es.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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/).

README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22

33
Build web applications using React.js for the front end and python/flask for your backend API.
44

5-
- Documentation can be found here: https://start.4geeksacademy.com/starters/react-flask
5+
- Documentation can be found here: https://4geeks.com/docs/start/react-flask-template
66
- Here is a video on [how to use this template](https://www.loom.com/share/f37c6838b3f1496c95111e515e83dd9b)
77
- Integrated with Pipenv for package managing.
8-
- Fast deployment to heroku [in just a few steps here](https://start.4geeksacademy.com/backend/deploy-heroku-posgres).
8+
- Fast deployment to Render [in just a few steps here](https://4geeks.com/docs/start/deploy-to-render-com).
99
- Use of .env file.
1010
- SQLAlchemy integration for database abstraction.
1111

1212
### 1) Installation:
1313

1414
> If you use Github Codespaces (recommended) or Gitpod this template will already come with Python, Node and the Posgres Database installed. If you are working locally make sure to install Python 3.10, Node
1515
16-
It is recomended to install the backend first, make sure you have Python 3.8, Pipenv and a database engine (Posgress recomended)
16+
It is recomended to install the backend first, make sure you have Python 3.10, Pipenv and a database engine (Posgress recomended)
1717

1818
1. Install the python packages: `$ pipenv install`
1919
2. Create a .env file based on the .env.example: `$ cp .env.example .env`
@@ -65,14 +65,14 @@ Every Github codespace environment will have **its own database**, so if you're
6565

6666
### Front-End Manual Installation:
6767

68-
- Make sure you are using node version 14+ and that you have already successfully installed and runned the backend.
68+
- Make sure you are using node version 20 and that you have already successfully installed and runned the backend.
6969

7070
1. Install the packages: `$ npm install`
7171
2. Start coding! start the webpack dev server `$ npm run start`
7272

7373
## Publish your website!
7474

75-
This boilerplate it's 100% read to deploy with Render.com and Heroku in a matter of minutes. Please read the [official documentation about it](https://start.4geeksacademy.com/deploy).
75+
This boilerplate it's 100% read to deploy with Render.com and Heroku in a matter of minutes. Please read the [official documentation about it](https://4geeks.com/docs/start/deploy-to-render-com).
7676

7777
### Contributors
7878

docs/assets/env-file.png

25.8 KB
Loading

docs/assets/preview.png

176 KB
Loading

0 commit comments

Comments
 (0)