Accueil  »  Base de connaissances • Développement • React   »   Centralisation des variables d’environnement et constantes dans React

Centralisation des variables d’environnement et constantes dans React

, ,

Dans cet article, nous explorerons comment centraliser les variables d’environnement et les variables constantes dans une application React en utilisant le système Vite pour la gestion des configurations d’environnement.

Sommaire

Introduction – Comprendre la différence entre les variables d’environnement et les constantes

Les variables d’environnement et les constantes jouent un rôle important dans la configuration d’une application React. Les premières permettent d’adapter le comportement de l’application selon l’environnement (développement, testing, production), tandis que les secondes servent à définir des valeurs fixes qui ne changent pas.

Étape 1 : Création des variables d’environnement avec le système Vite

Vite est un outil moderne de construction de frontend qui offre un serveur de développement extrêmement rapide et optimise les builds pour la production. Pour créer des variables d’environnement, définissez-les dans un fichier .env comme suit :

// .env.local
VITE_API_BASE_URL=https://127.0.0.1:8000
PORT=3000

Étape 2 : Création d’un fichier de configuration centralisé

Créez un fichier config.js à la racine de votre répertoire src pour centraliser les configurations :

// src/config.js
export const config = {
  API_BASE_URL: import.meta.env.VITE_API_BASE_URL || 'https://127.0.0.1:8000',
  SOFTWARE_NAME: 'Symfony',
  SOFTWARE_EDITOR: 'Webstreet',
  currentYear: new Date().getFullYear(),
};

Étape 3 : Utilisation du contexte pour un accès global

Créez un contexte pour fournir une configuration accessible globalement :

// src/ConfigContext.js
import React, { createContext, useContext } from 'react';
import { config } from './config';

const ConfigContext = createContext(config);

export const useConfig = () => {
  return useContext(ConfigContext);
};

export const ConfigProvider = ({ children }) => (
  <ConfigContext.Provider value={config}>
    {children}
  </ConfigContext.Provider>
);

Étape 4 : Utilisation du contexte de configuration dans l’application

Entourez votre application avec ConfigProvider pour utiliser la configuration n’importe où dans votre application :

// src/App.js
import React from 'react';
import { ConfigProvider } from './ConfigContext';
import YourComponent from './YourComponent';

function App() {
  return (
    <ConfigProvider>
      <YourComponent />
    </ConfigProvider>
  );
}

Étape 5 : Accès aux constantes dans les composants

Vous pouvez désormais accéder facilement aux constantes dans vos composants en utilisant useConfig :

// src/YourComponent.js
import React from 'react';
import { useConfig } from './ConfigContext';

const YourComponent = () => {
  const config = useConfig();
  
  return (
    <div>
      <a href={config.API_BASE_URL} target="_blank" rel="noopener noreferrer">
        {config.SOFTWARE_NAME}
      </a>
      <span className="ms-1">
        &copy; {config.currentYear} {config.SOFTWARE_EDITOR}.
      </span>
    </div>
  );
};

export default YourComponent;

Considérations pour index.html

Pour les remplacements de variables dans index.html, il faut utiliser les plugins de Vite pour les transformations HTML, en veillant à ce que cela fasse partie de la configuration de build. Pour cela crééez un fichier configHtml.js à la racine de src :

// src/configHtml
export default function configHtml(envVariables) {
    return {
        transformIndexHtml(html) {
            return html
                .replace(/%SOFTWARE_NAME%/g, envVariables.VITE_SOFTWARE_NAME)
                .replace(/%SOFTWARE_EDITOR%/g, envVariables.VITE_SOFTWARE_EDITOR);
        }
    };
}

Puis, dans le fichier vite.config.mjs qui se trouve à la racine globale du projet, intégrez cette fonction de la manière suivante : 

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'node:path';
import autoprefixer from 'autoprefixer';
import configHtml from './src/configHtml';

// Load environment variables from .env file
import dotenv from 'dotenv';
dotenv.config();

export default defineConfig(() => {
    return {
        base: './',
        build: {
            outDir: 'build',
        },
        css: {
            postcss: {
                plugins: [
                    autoprefixer({}), // add options if needed
                ],
            },
            preprocessorOptions: {
                scss: {
                    quietDeps: true,
                    silenceDeprecations: ['import', 'legacy-js-api'],
                },
            },
        },
        esbuild: {
            loader: 'jsx',
            include: /src\/.*\.jsx?$/,
            exclude: [],
        },
        optimizeDeps: {
            force: true,
            esbuildOptions: {
                loader: {
                    '.js': 'jsx',
                },
            },
        },
        plugins: [
            react(),
            configHtml({
                VITE_SOFTWARE_NAME: process.env.VITE_SOFTWARE_NAME,
                VITE_SOFTWARE_EDITOR: process.env.VITE_SOFTWARE_EDITOR
            })
        ],
        resolve: {
            alias: [
                { find: 'src/', replacement: `${path.resolve(__dirname, 'src')}/` },
            ],
            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss'],
        },
        server: {
            port: 3000,
            proxy: {
                // https://vitejs.dev/config/server-options.html
            },
        },
    };
});

Enfin, utilisez vos variables dans le fichier index.html situé à la racine de votre application. Celles-ci seront alors parsées lors de la phase de build :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="%SOFTWARE_NAME%">
    <meta name="author" content="%SOFTWARE_EDITOR%">
    <meta name="keyword" content="%SOFTWARE_NAME%">
    <title>%SOFTWARE_NAME%</title>
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app
    </noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

Conclusion

En centralisant la configuration, en utilisant les contextes et les hooks, vous réduisez le besoin d’importations redondantes et simplifiez le processus de gestion des constantes. Cela permet de mieux structurer votre application et d’assurer une gestion sécurisée et efficace de la configuration.

Si vous avez des questions ou souhaitez partager vos expériences, n’hésitez pas à laisser un commentaire ci-dessous !