Last active
May 23, 2022 11:10
-
-
Save pmNiko/ceeabaa970a3da334a159fcb8b80650a to your computer and use it in GitHub Desktop.
React CSR entornos de desarrollo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
____________::::::::::::::::::: Entornos de desarrollo :::::::::::::::::::________ | |
Cuando desarrollamos nuestras apps generalmente trabajamos con distintos entornos: | |
1. development | |
2. test | |
3. production | |
4. staging(opcional, pre production) | |
Teniendo en cuenta esto no queremos ensuciar la BD de production con las | |
pruebas de test ó development. Para esto es que hacemos uso de librerias | |
como dotenv ó env-cmd. Para la puesta en escena usamos "env-cmd": "^10.1.0" | |
Definimos un archivo .env-cmd en el cual escribimos un json con nuestras | |
variables de entorno: | |
{ | |
"development": { | |
"PUBLIC_URL": "https://localhost:3000/app1", | |
"REACT_APP_BASENAME": "/app1", | |
"REACT_APP_API_WEBSERVICE": "https://192.168.2.49:4000/webservices" | |
}, | |
"test": { | |
"PUBLIC_URL": "https://192.168.2.49/app1", | |
"REACT_APP_BASENAME": "/app1", | |
"REACT_APP_API_WEBSERVICE": "https://192.168.2.49:4000/webservices", | |
} | |
} | |
Las variables que comiencen con REACT_APP_ seran tomadas en cuenta por React | |
para insertar su valor en el código. Las únicas excepciones son: | |
1.NODE_ENV(read only) | |
2.PUBLIC_URL(wrx) | |
____________::::::::::::::::::: Package.json :::::::::::::::::::____________ | |
Para indicar un entorno en particular a la hora de ejecutar el código, lo | |
debemos especificar en el script del package.json | |
"scripts": { | |
"start": "env-cmd -e development react-scripts start", | |
"build": "react-scripts build", | |
"test": "env-cmd -e react-scripts test", | |
"eject": "react-scripts eject" | |
}, | |
Este archivo .env será despreciado por git y por lo tanto no será subido a | |
github, esto es justamente para que no queden expuestas nuestras credenciales | |
y/o URLs. | |
____________::::::::::::::::::: process.env :::::::::::::::::::____________ | |
Para leer el valor de nuestras variables debemos utilizar process.env.PUBLIC_URL | |
accediendo a la variable que necesitemos según corresponda. | |
Por defecto hará la busqueda de la variable en el sistema operativo ó de lo | |
contrario en el archivo .env en la raiz del proyecto. | |
____________::::::::::::::::::: Build :::::::::::::::::::___________________ | |
A la hora de realizar el build de la app se debe tener en cuenta que este | |
será el momento en el cual serán remplazadas las variables process.env | |
por el valor de las variables de entorno. Es por esto que el build de la app | |
de producción debe ser realizada en el servidor de producción. | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment