How to get front end to see .env contents?

I'm working on an app that has client side and server side hosted on two seperate heroku deployments. When I hard code the url in the axios call from the front end to the back end it works in the production environment:auth.js file:const baseUrl = 'https://url.herokuapp.com/'function Auth() {    axios.get(baseUrl + 'api/user', test)​But if I add the following to the .env file and change the code as below it doesn't work:auth.js file:const baseUrl = process.env.REACT_APP_SERVER_URL || '/'function Auth() {    axios.get(baseUrl + 'api/user', test).env file:if (process.env.NODE_ENV !== 'production') {    REACT_APP_SERVER_URL = "http://localhost:3001/"} else {    REACT_APP_SERVER_URL = "https://url.herokuapp.com/"}​I've tried adding and installing dotenv to a route server.js file on the front end but now luckrequire('dotenv').config();​Any ideas?

Submitted October 21, 2019 at 03:25PM by hello_isitmeyoulook4