Cómo configurar una aplicación React local en Raspberry Pi?

06 Aug, 2023 Programación 0

Estoy teniendo algunos problemas para configurar mi aplicación de React (front-end, con back-end de Python/PgSQL) en mi Raspberry Pi después de fracasar en construirla desde allí (no hay suficiente memoria), permíteme explicarlo:

Antes:
– Todo estaba en la Raspberry Pi: Python, base de datos Pg, aplicación de React.
– Uso VSCode desde mi PC con Windows con una conexión SSH a la Raspberry Pi.
– Ejecuto con npm start en raspberrypi.lan:3000 (o 192.168.0.14:3000, la IP de la Raspberry Pi).

Todo iba bien hasta que intenté mejorarlo, ya que quería acceder a la aplicación directamente desde raspberrypi.lan.

Así que instalé un servidor Apache y seguí algunos tutoriales que me decían que solo tenía que ejecutar npm run build y copiar/pegar la carpeta build en /var/www/html, lo cual hice.

¡Genial, está funcionando muy bien!

Ahora:
– El código de React se ha movido a mi PC con Windows.
– Uso VSCode desde mi PC con Windows de forma local.
– En desarrollo (PC), ejecuto con npm start en localhost:3000.
– En producción (Raspberry Pi), se ejecuta en el servidor Apache en raspberrypi.lan.
– Se construye con npm run build.
– Transfiero la carpeta build generada por FTP a la Raspberry Pi en /var/www/html.

=> No es realmente glamuroso, si alguien sabe cómo hacerlo mejor…

Nuevamente, eso funciona bien… excepto que…

Cuando llamo a mi API de Python (recuerda, en la Raspberry Pi, en raspberrypi.lan:5000), tengo dos comportamientos:

En desarrollo (PC):

Acceso a XMLHttpRequest en ‘http://raspberrypi.lan/api/product/list’ desde el origen ‘http://localhost:3000’ ha sido bloqueado por la política de CORS.
En producción (Raspberry Pi):

Necesitas habilitar JavaScript para ejecutar esta aplicación.

Sé lo que significan, pero no sé cómo arreglarlos correctamente.
Puedes notar que en producción, las llamadas responden con OK 200, pero algo parece estar faltando.
Si agrego el puerto de la API, me encuentro con la política de CORS también en producción:

Acceso a XMLHttpRequest en ‘http://raspberrypi.lan:5000/api/product/list’ desde el origen ‘http://raspberrypi.lan’ ha sido bloqueado por la política de CORS.

Así que aquí estoy, preguntándote:

¿Cómo configuro todo esto para que pueda acceder a la API tanto desde el PC como desde la Raspberry Pi?

Gracias de antemano y disculpa por mi inglés aproximado.

davy.ai

August 6, 2023 at 5:16 am

Para solucionar el problema de la política de CORS, puedes agregar el siguiente código en tu backend de Python:

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/product/list', methods=['GET'])
def get_products():
    # tu código aquí
    return jsonify(products)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Esto permitirá el intercambio de recursos de origen cruzado para tu API backend.

Para habilitar que JavaScript se ejecute en tu servidor de producción, puedes verificar si algún bloqueador de anuncios o software de seguridad lo está bloqueando. También puedes intentar borrar la caché de tu navegador y desactivar cualquier extensión del navegador que pueda estar causando el problema.

En cuanto a transferir la carpeta “build” al Pi, puedes utilizar “scp” en lugar de FTP. Desde la terminal de tu PC con Windows, ejecuta el siguiente comando:

scp -r build/ pi@raspberrypi.lan:/var/www/html/

Esto copiará de forma segura la carpeta “build” al directorio “/var/www/html” de tu Pi.

Al implementar las soluciones anteriores, deberías poder acceder a tu API de Python tanto desde tu PC como desde el Pi, evitando cualquier error de política de CORS.

Answer

davy.ai

August 6, 2023 at 5:16 am
Para solucionar el problema de la política de CORS, puedes agregar el siguiente código en tu backend de Python:
```
from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/product/list', methods=['GET'])
def get_products():
    # tu código aquí
    return jsonify(products)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)
```
Esto permitirá el intercambio de recursos de origen cruzado para tu API backend.

Para habilitar que JavaScript se ejecute en tu servidor de producción, puedes verificar si algún bloqueador de anuncios o software de seguridad lo está bloqueando. También puedes intentar borrar la caché de tu navegador y desactivar cualquier extensión del navegador que pueda estar causando el problema.

En cuanto a transferir la carpeta “build” al Pi, puedes utilizar “scp” en lugar de FTP. Desde la terminal de tu PC con Windows, ejecuta el siguiente comando:
```
scp -r build/ pi@raspberrypi.lan:/var/www/html/
```
Esto copiará de forma segura la carpeta “build” al directorio “/var/www/html” de tu Pi.

Al implementar las soluciones anteriores, deberías poder acceder a tu API de Python tanto desde tu PC como desde el Pi, evitando cualquier error de política de CORS.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo configurar una aplicación React local en Raspberry Pi?

Answer

davy.ai