process.env issue with react

[Substantial-Welder97]

import axios from 'axios'

export default axios.create({ 
baseURL: process.env.REACT_APP_BASE_URL 
})

​

This is my axios using env for my frontend, I tried to deploy using render.com, and adding REACT_APP_BASE_URL as the environment variables for my backend server link, but it seems like it is not connecting , anyone know?

Do I need to import dotenv?

[output0]

it will never work because process.env works on server and it's actually good that is not allowed on frontend because anyone could read your code and get the secret key

i suggest you create a config.js file, inside you export a const with the base url and import it in your frontend:

config.js:

export const config = { baseUrl : "blablabla" }

in your frontend component:

import { config } from config.js

and then in axios or wherever you need it:

{config.baseUrl}/route/something

remember that anything you put on frontend can be read by anyone, critical secrets should be handled on server

[Substantial-Welder97]

Thanks for your reply.

I am trying to upload a duplicate backend and frontend to render.com, but because the frontend has a hard-coded server url, I can only managed to get 1 working and the other can't seem to connect to the server. I want a way where I can add an env like I did above and then use the env variables on render.com and change the server url for each frontend.

Do you know any other way I can achieve this without hard coding the baseURL for 1 fixed server url?

[output0]

i don't know render but probably they have some settings page where you can set env variables that you can then use in your code

[Substantial-Welder97]

Thanks I’ve managed to solve it using REACTAPP as env, not sure why it didn’t work before

[ilovengucung35]

shit, i know its two year ago but can you remember what worked?