react evironment variables .env return undefined

Question

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;

Answer 1

Three things to note here

1. the variable should be prefixed with REACT_APP_

   eg: REACT_APP_WEBSITE_NAME=hello

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

3. Make sure you have the .env file in your root folder(same place where you have your package.json) and NOT in your src folder.

After that you can access the variable like this process.env.REACT_APP_SOME_VARIABLE

Additional tips

1. No need to wrap your variable value in single or double quotes.
2. Do not put semicolon ; or comma , at the end of each line.

Read more here and the official docs