Setting up ENV Variables Without create-react-app

Question

What would be the process of setting up ENV variables to work in your react project when your react project isn't built using create-react-app, and has no backend?

Answer 1

Found the answer. Quoted from this post by Aminu Kano.

Webpack Users

If you are using webpack, you can install and use dotenv-webpack plugin, to do that follow steps below:

Install the package

yarn add dotenv-webpack OR npm i dotenv-webpack

// .env 
API_KEY='my secret api key' Add it to webpack.config.js file

// webpack.config.js const Dotenv = require('dotenv-webpack');

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

Use it in your code as

 process.env.API_KEY

For more information and configuration information, visit here