how to use different IP address for development and production with react and axios

Question

I am building an app using react & django rest framework.I can access all of data via axios url (127.0.0.1:8000). But when i deploy it to azure for production then the axios ip needs to change by azure container ip for requesting to the url. What is the best way to do this for production?

Answer 1

You can use environment variables by creating a .env file. You can have a .env.development file for development and a .env.production file for production.

When you are developing on your machine with npm start or yarn start, it will use the .env.development file in your application.

Note: You need to restart the development server after changing .env files for your changes to take effect during development.

When you build for production with npm build or yarn build, it will use the .env.production file.

.env.development

REACT_APP_AXIOS_URL="127.0.0.1:8000"

.env.production

REACT_APP_AXIOS_URL="http://yourapi.com"

Then your application code only needs to reference these variables through process.env.

axios.get(process.env.REACT_APP_AXIOS_URL)