Skip to content

Instantly share code, notes, and snippets.

@pmNiko
Last active May 23, 2022 11:10
Show Gist options
  • Save pmNiko/ceeabaa970a3da334a159fcb8b80650a to your computer and use it in GitHub Desktop.
Save pmNiko/ceeabaa970a3da334a159fcb8b80650a to your computer and use it in GitHub Desktop.
React CSR entornos de desarrollo
____________::::::::::::::::::: 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