استخدام متغيرات البيئة في React

لاستخدام متغيرات البيئة المحددة في ملف .bash_profile في تطبيق React ، يمكنك استخدام مكتبة dotenv لتحميل المتغيرات عند بدء التطبيق.

في البداية ، قم بتثبيت مكتبة dotenv باستخدام npm:

bashCopy code
npm install dotenv

ثم قم بإنشاء ملف .env في جذر مشروعك وضع فيه المتغيرات البيئية الخاصة بك:

arduinoCopy code
REACT_APP_API_URL=https://your_api_url_here

لاحظ أنه يجب بدء أسماء المتغيرات بـ REACT_APP_ لتتمكن React من التعرف عليها.

ثم قم بتحميل المتغيرات في ملف البداية الخاص بتطبيق React (مثل index.js) باستخدام dotenv:

javascriptCopy code
require('dotenv').config();

ReactDOM.render(
  <React.StrictMode>
    <App />
  React.StrictMode>,
  document.getElementById('root')
);

الآن يمكنك استخدام المتغيرات البيئية في التطبيق عن طريق الوصول إليها كمتغيرات عادية في JavaScript:

javascriptCopy code
const apiUrl = process.env.REACT_APP_API_URL;

وبهذا يمكنك تعريف متغيرات بيئية مختلفة لكل نسخة من تطبيقك في الإنتاج باستخدام ملف .bash_profile.

بالطبع! بالإضافة إلى الخطوات السابقة، هناك بعض الأشياء الإضافية التي يمكنك القيام بها لتكوين التطبيق بشكل أفضل باستخدام متغيرات البيئة:

1. تحميل متغيرات البيئة في جميع الملفات: إذا كنت ترغب في استخدام متغيرات البيئة في جميع أنحاء التطبيق بدون الحاجة لتحميلها في كل ملف، يمكنك تحميلها في البداية وتعيينها كمتغيرات عامة:

   javascriptCopy code
   // index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   
   require('dotenv').config();
   
   const apiUrl = process.env.REACT_APP_API_URL;
   
   ReactDOM.render(
     <React.StrictMode>
       <App apiUrl={apiUrl} />
     React.StrictMode>,
     document.getElementById('root')
   );
   

   ثم يمكنك استخدام apiUrl في أي مكان داخل تطبيقك.

2. تحميل متغيرات البيئة في المتغيرات العامة: يمكنك تحميل متغيرات البيئة في المتغيرات العامة في ملف تكوين webpack الخاص بك لتكون متاحة في كل مكان داخل التطبيق بدون الحاجة لاستيرادها في كل ملف:

   javascriptCopy code
   // webpack.config.js
   const webpack = require('webpack');
   require('dotenv').config();
   
   module.exports = {
     // تكوين webpack الخاص بك هنا
     plugins: [
       new webpack.DefinePlugin({
         'process.env.REACT_APP_API_URL': JSON.stringify(process.env.REACT_APP_API_URL),
       }),
     ],
   };
   

   هذا سيجعل REACT_APP_API_URL متاحًا كمتغير عام في جميع أنحاء التطبيق.

3. تكوين متغيرات البيئة لكل بيئة: يمكنك إعداد متغيرات البيئة لكل بيئة (development ، production ، إلخ) باستخدام ملفات .env المناسبة. مثلاً ، يمكنك إنشاء ملف .env.production للمتغيرات البيئية في الإنتاج و .env.development للمتغيرات في التطوير.