Usar variáveis de ambiente no React.js

As variáveis de ambiente do Managed Runtime permitem que você adicione variáveis ao processo do aplicativo em execução em um ambiente, sem precisar fazer alterações no código. Elas são armazenadas com segurança, o que as torna ideais para os seguintes casos de uso:

  • Chamar recursos de terceiros protegidos por chaves de API
  • Alterar condicionalmente a renderização de React.js

Para obter mais detalhes, consulte Variáveis de ambiente.

Neste tutorial, usaremos variáveis de ambiente para alterar a renderização de React.js sem alterar o código. Você acessa variáveis de ambiente por meio de process.env, que só está disponível no Node.js e não em navegadores. A renderização do PWA Kit é isomórfica, na medida em que é renderizada tanto no cliente quanto no servidor. Portanto, para disponibilizar variáveis de ambiente no React.js, você pode adicioná-las aos seus arquivos de configuração do PWA Kit, conforme mostrado neste tutorial.

Neste exemplo, usaremos uma variável de ambiente para habilitar um recurso em seu site. Por exemplo, por tempo limitado, você pode testar um novo recurso, como o Express Checkout. Em seguida, você pode monitorar o engajamento do comprador com o recurso para entender seu impacto.

Para concluir este tutorial, primeiro:

  • Obtenha acesso ao Managed Runtime e ao Runtime Admin. Consulte Administração do Managed Runtime
  • Tenha uma chave de API para usar a Managed Runtime API. Para encontrar a chave de API, faça logon na ferramenta Runtime Admin e vá para a página Configurações de conta.
  • Ter uma função de desenvolvedor ou administrador no projeto para o qual você está definindo variáveis de ambiente. Se você não tiver acesso, peça ajuda a alguém em uma função de administrador do Managed Runtime.

Antes de executar os comandos neste tutorial, substitua os espaços reservados por valores reais. Os espaços reservados são formatados da seguinte maneira: $PLACEHOLDER.

Em seu projeto, crie o conteúdo ou recurso escolhido. Por exemplo, crie um banner de herói em sua página inicial.

  1. Para definir a variável de ambiente na sessão atual, abra um terminal e execute este comando:

    • Windows: set ENABLE_FEATURE='true'
    • A maioria dos sistemas operacionais do tipo Unix, incluindo o macOS: export ENABLE_FEATURE=‘true’

  2. Verifique se a variável de ambiente está definida corretamente executando:

    • Windows: echo %$ENABLE_FEATURE%
    • A maioria dos sistemas operacionais do tipo Unix, incluindo o macOS: echo $ENABLE_FEATURE

    O comando retorna esta saída: true

  3. Adicione este código JavaScript ao arquivo de configuração em seu projeto — config/default.js:

  1. Adicione este código JavaScript à página inicial em seu projeto — app/pages/home/index.jsx:
  1. Inicie o servidor de desenvolvimento usando npm start e navegue até a página inicial localmente para ver seu recurso renderizado.

Recomendamos testar essas etapas em um ambiente que não seja de produção antes de implantar suas alterações na produção.

Antes de executar os comandos neste tutorial, substitua os espaços reservados por valores reais. Os espaços reservados são formatados da seguinte maneira: $PLACEHOLDER.

  1. Use cURL para chamar o projects_target_env_var_partial_update endpoint da API e definir um sinalizador de recurso como uma variável de ambiente. Isso implanta seu pacote. Aguarde a reimplantação do ambiente antes de usar a variável de ambiente em seu código. Você também pode usar o Runtime Admin para gerenciar variáveis de ambiente. Consulte Variáveis de ambiente.
  1. Implante o pacote da máquina local no ambiente escolhido.