Uso de variables de entorno en 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.

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.