Uso delle variabili di ambiente in React.js

Le variabili di ambiente di Managed Runtime consentono di aggiungere variabili al processo di applicazione in esecuzione in un ambiente senza dover apportare modifiche al codice. Le variabili di ambiente vengono archiviate in maniera sicura e il loro utilizzo è ideale nei seguenti casi:

  • Chiamate a risorse di terze parti protette da chiavi API
  • Modifiche condizionali del rendering React.js

Per ulteriori informazioni, vedere Variabili di ambiente.

In questo tutorial si useranno le variabili di ambiente per modificare il rendering di React.js senza modificare il codice. È possibile accedere alle variabili di ambiente tramite process.env, che è disponibile solo in Node.js e non nei browser. Il rendering di PWA Kit è isomorfo, in quanto esegue il rendering sia sul client che sul server. Pertanto, per rendere disponibili le variabili di ambiente in React.js è possibile aggiungerle ai file di configurazione PWA Kit come illustrato in questo tutorial.

In questo esempio utilizzeremo una variabile di ambiente per abilitare una funzionalità sul proprio sito. Ad esempio, per un periodo di tempo limitato è possibile testare una nuova funzionalità come Express Checkout. È quindi possibile monitorare il coinvolgimento degli acquirenti con la funzionalità per comprenderne l'impatto.

Prerequisiti per completare questo tutorial:

  • Ottenere l'accesso a Managed Runtime e Runtime Admin. Consultare Amministrazione in Managed Runtime
  • Avere a disposizione una chiave API per utilizzare la Managed Runtime API. Per individuare la chiave API, accedere allo strumento Runtime Admin e passare alla pagina Account Settings (Impostazioni account).
  • Detenere un ruolo di sviluppatore o amministratore nel progetto per il quale si intende impostare le variabili di ambiente. Se non si dispone dell'accesso, chiedere aiuto a qualcuno con un ruolo di amministratore Managed Runtime.

Prima di eseguire i comandi di questo tutorial, sostituire tutti i segnaposto con valori effettivi. I segnaposto sono formattati nel seguente modo: $PLACEHOLDER.

Nel proprio progetto, creare il contenuto o la funzionalità che si preferisce. Ad esempio, creare un banner hero sulla propria home page.

  1. Per impostare la variabile d'ambiente nella sessione corrente, aprire un terminale ed eseguire questo comando:

    • Windows: set ENABLE_FEATURE='true'
    • Maggior parte dei sistemi operativi simili a Unix, incluso macOS: export ENABLE_FEATURE=‘true’

  2. Verificare se la variabile di ambiente è impostata correttamente eseguendo:

    • Windows: echo %$ENABLE_FEATURE%
    • Maggior parte dei sistemi operativi simili a Unix, incluso macOS: echo $ENABLE_FEATURE

    Il comando restituisce questo output: true

  3. Aggiungere questo codice JavaScript al file di configurazione del proprio progetto — config/default.js:

  1. Aggiungere questo codice JavaScript alla home page del proprio progetto — app/pages/home/index.jsx:
  1. Avviare il server di sviluppo utilizzando npm start, quindi passare alla home page in locale per visualizzare il rendering della funzionalità.

È consigliabile testare questi passaggi in un ambiente non di produzione prima di distribuire le modifiche nell'ambiente Production.

Prima di eseguire i comandi di questo tutorial, sostituire tutti i segnaposto con valori effettivi. I segnaposto sono formattati nel seguente modo: $PLACEHOLDER.

  1. Utilizzare cURL per richiamare l'endpoint API projects_target_env_var_partial_update e impostare un flag di funzionalità come variabile di ambiente. In questo modo il bundle viene distribuito. Attendere la ridistribuzione dell'ambiente prima di usare la variabile di ambiente nel proprio codice. Per gestire le variabili di ambiente è anche possibile usare Runtime Admin. Vedere Variabili di ambiente.
  1. Distribuire il bundle dal computer locale all'ambiente scelto.