Discussion on: How can I declare a global variable in react app so that I can access it anywhere in the application

@amirsohel007 That's a great question. Btw you should probably tag #beginners and #javascript too. Anyway, since an API URL may vary between environments:

1. I would advocate the method of setting this variable as an environment variable.

2. To make it accessible to your different components, you can create a module that deals with both collecting and accessing all the environment variables in the application.
   

// ## config.js ##
..
module.exports = {
  endpoint: process.env.API_URL,
};


  // ## myComponent.js ##
  import { endpoint } from './config';

  // Now you could do:
  const MyComponent = () => <h1>{config.API_URL}</h1>;

  // Instead of:
  const MyComponent = () => <h1>{process.env.API_URL}</h1>;

There are different approaches to achieve the above:

1. If you use CRA (create-react-app), you might want to read this which comes with a nice way out of the box.
2. Otherwise, you can go through the standard ways using webpack which allows you to do it either with:
   • Using npm scripts to set environment variables

  {
    scripts: {
      "dev": "webpack --env.API_URL=http://localhost:8000 --config webpack.config.dev.js",
    }
  }

• Using an .env file to set environment variables.

  API_URL=http://localhost:8000

Note: Add the .env file to your .gitignore.

Just in case, you might want to read more about dotenv, cross-env