CODEWITHSUNDEEP
node.jsreactjs
randal
randal

Reputation: 1362

React is not fetching env variables

Trying to utilize env variables within react, and im getting an

undefined

I'm not using webpack, just dotenv. Not sure why its not working.

I referenced this

React env variables with .env

and the it doesn't have the solution im looking for.

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.1",
    "@material-ui/icons": "^3.0.2",
    "axios": "^0.18.0",
    "history": "^4.7.2",
    "http-proxy-middleware": "^0.19.1",
    "material-ui-icons": "^1.0.0-beta.36",
    "moment": "^2.24.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "dotenv": "^6.2.0"
  }
}

Home.js

import React, {Component} from 'react';
// import axios from 'axios';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import {withStyles} from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import {signWithGithub} from '../actions/';
import {connect} from 'react-redux';
import {compose} from 'redux';
import Avatar from '@material-ui/core/Avatar';
import Axios from '../Axios'
import {Redirect, withRouter} from 'react-router-dom';
const styles = theme => ({
    root: {
        flexGrow: 1,
        padding: 20
    },
    paper: {
        padding: theme.spacing.unit * 2,
        textAlign: 'center',
        color: theme.palette.text.secondary
    },

    chip: {
        margin: theme.spacing.unit
    }
});

class Home extends Component {

    constructor(props) {
        super(props);

        this.state = {
            user: ""
        }

    }

    componentWillMount = () => {
        console.log(process.env.BASE_GITHUB_SIGNIN);
    }

.env

BASE_URL=http://localhost:8000
BASE_SIGN_IN=http://localhost:8000/api/users/loginUser
BASE_GITHUB_SIGNIN=http://127.0.0.1:8000/api/users/auth/github

enter image description here

Upvotes: 3

Views: 2555

Answers (2)

gajuki
gajuki

Reputation: 1

I had the same problem. If you have not done the .env file, do so in your main directory. Remember to start your react application, this will allow React to read the.env file. I created a util directory and did a function call to return the variables in my .env file. I called the functions from my get request.

`export const API_KEY = () => {

  return process.env.REACT_APP_API_KEY; // will return API KEY in .env file.
};

export const API_URL = () => {
  return process.env.REACT_APP_API_URL; // will return API URL in .env file.
};

` Once this is done, the function will return the .env variables to your API calls.

` axios.get(API_URL(), {
      params: { query: term },
      headers: {
        Authorization: `Client-ID ${API_KEY()}`,
      },
    });`

Upvotes: 0

Mukundhan
Mukundhan

Reputation: 3457

If you have created your app using create-react-app , the env has a standard format like here.

Just prepend REACT_APP to every variable, that will do fine

REACT_APP_YOUR_VARIABLE_NAME

Upvotes: 5

Related Questions