متغيرات البيئة لا تعمل في react

الخطوات التي قمت بها كلها صحيحة عدا تسمية المتغير البيئي ففي مشروع منتج من create-react-app يكون من المفروض عليك أن تبدأ تسمية المتغيرات البيئية ب REACT_APP كالتالي :

REACT_APP_devapi=http://localhost:4000/api

import axios from 'axios';

const instance = axios.create({
    baseURL: process.env.REACT_APP_devapi
});

export default instance;

وكل مرة تضيف أو تغير متغير بيئي عليك باعادة تشغيل السيرفر 

إذا كنت قد أنشأت تطبيقك باستخدام تطبيق create-react-app ، فمشروعك يتوفر على ملف env. خاص يكون شكله كما هو مبين هنا .

ولجلب متغيرات البيئة ما عليك سوى إرفاق REACT_APP مسبقًا بكل متغير ، مثلا إدا كنت تريد devapi ما عليك سوى كتابة 

process.env.REACT_APP_devapi

لنفترض أنك تريد إظهر المتغير PORT داخل مكون react . ما عليك سوى كتابة :

render() {
  return (
    <div>
      <small>You are running this application in port <b>{process.env.REACT_APP_PORT}</b></small>
    </div>
  );
}