Utiliser des variables d’environnement 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.

Prérequis

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.

Sur votre machine locale

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.

Prérequis pour les tests locaux

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.

Tester la variable d’environnement localement

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’
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
Ajoutez ce code JavaScript au fichier de configuration de votre projet &mdash ; config/default.js :

1function parseEnvVar(envVarName) {
2  const val = process.env[envVarName]
3  if (val === undefined) {
4    throw new Error(`Environment variable ${envVarName} is required.`)
5  }
6  try {
7    return JSON.parse(val)
8  } catch (err) {
9    throw new Error(`Environment variable ${envVarName} must be a valid JSON string.`)
10  }
11}
12module.exports = {
13  app: {
14    enableFeature: parseEnvVar('ENABLE_FEATURE') || false
15  }
16}

Ajoutez ce code JavaScript à la page d’accueil de votre projet &mdash ; app/pages/home/index.jsx :

1import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
2
3const Home = () => {
4  const config = getConfig()
5  const enableFeature = config.app.enableFeature
6  return enableFeature && <h1>My New Feature</h1>
7}
8
9export default Home

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.

Dans un environnement hors production ou de production

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