Agfdhyk

I am building a react app and i need to fetch data from my api, now i want to store the api url as an environment variable. I have my .env file, i have dotenv installed, here is my code process.env.API_URL is returning undefined.

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import Home from '../src/components/Home'

import dotenv from  'dotenv'

import path from 'path'





class App extends Component {

  render() {

    console.log(process.env.API_URL)

    return (

      <div>

        <Home/>

      </div>

    );

  }

}



export default App;

You will probably need to call dotenv.config() as suggested by the document

If you are using create-react-app, you don't need dotenv package. You will need to add REACT_APP_ prefix to the variable name in .env file. See the document here

2 things to note here

1. the variable should be prefixed with REACT_APP_
   


2. You need to restart the server to reflect the changes.

Hey thanks guy what i did and worked was create a config.js file

 const dev={

    API_URL:"http://localhost:300"

}



const prod={

    API_URL:"llll"

}

const config=process.env.NODE_ENV=='development'?dev:prod

export default  config

Then i import wherever maybe in a component and get my data.