how to configure web service url in react app deployed on heroku to access java REST web services which is also deployed in heroku

Question

I have 2 applications. Client is developed on react js and server is developed on spring boot using RESTful api. Both are working fine on localhost. I tried to deploy both apps on heroku. Server is working fine with postgres db on heroku (checked on postman). However, when I deployed react app on heroku as seperate app, its only showing me UI without data (from spring boot webservice). I changed the web service URL (used locally as http://localhost:8080) in react app to heroku server app URL(provided by heroku). Now its working. But, I don't know whether its correct way to configure.

Do anybody know, how to deploy server (Spring boot) and client (React js) both on heroku in right way?

Can you be more Specific Which kind of error are you getting. Check the console of the browser or give error from the network Tab. It will be more useful to debug things like this. — Parth Patel
I have edited question. I want to know if there is any appropriate way provided by heroku. — Abhishek

Parth Patel Parth Patel · Accepted Answer · 2019-11-30T14:18:23

I can say that use a .env file is a good way to provide the environment variable. Generally in production, these values come from the environment. So in code, we will have the placeholder/variable only so that we can use that thing to change the URLs and other public thigs like that with env file. And One more thing is that you can also override the default value in env file with an external Heroku dashboard env's.

WARNING: Do not store any secrets (such as private API keys) in your React app!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

You can provide the environment variable from the dashboard in the Heroku app(through Settings in the Heroku Dashboard).
Make sure your environment name starts with REACT_APP_ prefix.
Depending upon your requirement read this article which type of variable you want https://create-react-app.dev/docs/adding-custom-environment-variables/
This should make things work. I am sure it is also possible to keep .env file but I prefer to have more control via Heroku Dashboard. refer to this URL: https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack

Please refer to the documentation for usage :

So For REACT_APP_NOT_SECRET_CODE this env variable we can use code like this:

*`<input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />`*

I hope this will answer your question.

how to configure web service url in react app deployed on heroku to access java REST web services which is also deployed in heroku

1 Answers