Uso de variables de entorno en React.js

Las variables de entorno de Managed Runtime permiten agregar variables al proceso de la aplicación que se ejecuta en un entorno, sin tener que realizar cambios en el código. Las variables de entorno se almacenan de forma segura, lo que hace que sean ideales casos de uso como los siguientes:

  • Llamar a recursos de terceros que están protegidos por claves de API
  • Cambiar condicionalmente la representación React.js

Para obtener más información, consulte Variables deentorno.

En este tutorial, usaremos variables de entorno para alterar React.js renderizado sin cambiar el código. Las variables de entorno se acceden a través de process.env, que solo está disponible en Node.js y no en los navegadores. El renderizado de PWA Kit es isomórfico, ya que se renderiza tanto en el cliente como en el servidor. Por lo tanto, para que las variables de entorno estén disponibles en React.js, puede agregarlas a sus archivos de configuración PWA Kit como se muestra en este tutorial.

En este ejemplo, usaremos una variable de entorno para habilitar una característica en su sitio. Por ejemplo, durante un tiempo limitado, puede probar una nueva función, como el pago exprés. A continuación, puede supervisar la interacción de los compradores con la función para comprender su impacto.

Para completar este tutorial, primero:

  • Obtenga acceso a Managed Runtime y Runtime Admin. Administración de Managed Runtime
  • Tener una clave de API para usar la API de Managed Runtime. Para encontrar su clave de API, inicie sesión en la herramienta Runtime Admin y vaya a la página Configuración de la cuenta.
  • Tenga un rol de desarrollador o administrador en el proyecto para el que está configurando variables de entorno. Si no tienes acceso, pídele a alguien con un rol de administrador de Managed Runtime que te ayude con eso.

Antes de ejecutar los comandos de este tutorial, reemplace los marcadores de posición por valores reales. Los marcadores de posición tienen el siguiente formato: $PLACEHOLDER.

En tu proyecto, crea el contenido o la función que elijas. Por ejemplo, crea un banner de héroe en tu página de inicio.

  1. Para establecer la variable de entorno en la sesión actual, abra un terminal y ejecute este comando:

    • Windows: set ENABLE_FEATURE='true'
    • La mayoría de los sistemas operativos similares a Unix, incluido macOS: export ENABLE_FEATURE=‘true’

  2. Compruebe si la variable de entorno está configurada correctamente ejecutando:

    • Windows: echo %$ENABLE_FEATURE%
    • La mayoría de los sistemas operativos similares a Unix, incluido macOS: echo $ENABLE_FEATURE

    El comando devuelve este resultado: true

  3. Agregue este código JavaScript al archivo de configuración en su proyecto — config/default.js:

  1. Agregue este código JavaScript a la página de inicio de su proyecto — app/pages/home/index.jsx:
  1. Inicie el servidor de desarrollo usando npm start y, a continuación, navegue hasta la página de inicio localmente para ver la entidad representada.

Se recomienda probar estos pasos en un entorno que no sea de producción antes de implementar los cambios en producción.

Antes de ejecutar los comandos de este tutorial, reemplace los marcadores de posición por valores reales. Los marcadores de posición tienen el siguiente formato: $PLACEHOLDER.

  1. Utilice cURL para llamar al punto de conexión de la API y establecer un indicador de projects_target_env_var_partial_update característica como variable de entorno. De este modo, se implementa el paquete. Espere a que el entorno se vuelva a implementar antes de usar la variable de entorno en el código. También puede usar Runtime Admin para administrar variables de entorno. Consulte Variables de entorno.
  1. Implemente el paquete desde el equipo local en el entorno elegido.