Utiliser des variables d\u2019environnement dans React.js

Les variables d’environnement Managed Runtime vous permettent d’ajouter des variables au processus d’application exécuté dans un environnement, sans avoir à modifier le code. Les variables d’environnement sont stockées de façon sécurisée. Elles sont donc idéales pour des cas d’utilisation tels que :

  • Appels de ressources tierces protégées par des clés d’API
  • Modification conditionnelle du rendu React.js

Pour plus de détails, consultez Variables d’environnement.

Dans ce tutoriel, nous allons utiliser des variables d’environnement pour modifier le rendu React.js rendu sans modifier le code. Vous accédez aux variables d’environnement par le biais de process.env, qui n’est disponible que dans Node.js, pas dans les navigateurs. Le rendu PWA Kit est isomorphe, c’est-à-dire qu’il s’affiche à la fois sur le client et sur le serveur. Donc, pour rendre les variables d’environnement disponibles dans React.js, vous pouvez les ajouter à vos fichiers de configuration PWA Kit comme indiqué dans ce tutoriel.

Dans cet exemple, nous allons utiliser une variable d’environnement pour activer une fonctionnalité sur votre site. Par exemple, pour une durée limitée, vous pouvez tester une nouvelle fonctionnalité telle que le checkout rapide. Vous pouvez ensuite surveiller l’engagement des acheteurs avec cette fonctionnalité pour comprendre son impact.

Pour suivre ce tutoriel, procédez d’abord comme suit :

  • Accédez à Managed Runtime et Runtime Admin. Voir Administration de Managed Runtime.
  • Disposez d’une clé d’API pour utiliser l’API Managed Runtime. Pour trouver votre clé d'API, connectez-vous à l'outil Runtime Admin et accédez à la page Account Settings.
  • Disposez d’un rôle de développeur ou d’administrateur sur le projet pour lequel vous définissez des variables d’environnement. Si vous n’y avez pas accès, demandez à quelqu’un disposant du rôle d’administrateur Managed Runtime (MRT) de vous aider.

Avant d’exécuter les commandes de ce tutoriel, remplacez les espaces réservés par des valeurs réelles. Les espaces réservés sont formatés ainsi : $PLACEHOLDER.

Dans votre projet, créez le contenu ou la fonctionnalité de votre choix. Par exemple, créez une bannière sur votre page d’accueil.

  1. Pour définir la variable d’environnement dans la session en cours, ouvrez un terminal et exécutez la commande suivante :

    • Windows : set ENABLE_FEATURE='true'
    • La plupart des systèmes d’exploitation de type Unix, y compris macOS : export ENABLE_FEATURE=‘true’

  2. Vérifiez si la variable d’environnement est correctement définie en exécutant :

    • Windows : echo %$ENABLE_FEATURE%
    • La plupart des systèmes d’exploitation de type Unix, y compris macOS : echo $ENABLE_FEATURE

    La commande renvoie la sortie suivante : true

  3. Ajoutez ce code JavaScript au fichier de configuration de votre projet &mdash ; config/default.js :

  1. Ajoutez ce code JavaScript à la page d’accueil de votre projet &mdash ; app/pages/home/index.jsx :
  1. Démarrez le serveur de développement à l’aide de npm start, puis accédez à la page d’accueil localement pour voir votre fonctionnalité rendue.

Nous vous recommandons de tester ces étapes dans un environnement hors production avant de déployer vos modifications en production.

Avant d’exécuter les commandes de ce tutoriel, remplacez les espaces réservés par des valeurs réelles. Les espaces réservés sont formatés ainsi : $PLACEHOLDER.

  1. Utilisez cURL pour appeler le point de terminaison d’API projects_target_env_var_partial_update et définir un indicateur de fonctionnalité en tant que variable d’environnement. Cela déploie votre paquet. Attendez que l’environnement se redéploie avant d’utiliser la variable d’environnement dans votre code. Vous pouvez également utiliser Runtime Admin pour gérer les variables d’environnement. Voir Variables d’environnement.
  1. Déployez votre paquet à partir de votre machine locale vers l’environnement de votre choix.