How to make the site URL an external parameter to the application?

Posted February 9, 2021 371 views

I read your Login react.js article & liked it.
My issue is that I have the React app.
Now I need to generate 3 versions, for developement, testing and production.
They all differ only in the URL for the login.

How do I make the react app agnostic/ configurable at runtime
and save the need for 3 versions??

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Submit an Answer
2 answers

Hi there,

What you could do is define your development and production URLs in your .env file:


Then you can access the environment variable in React with:

const configUrl = process.env.REACT_APP_CONFIG_URL

If you are getting started with React, I would recommend this free video course here:

Getting Started with React

Hope that this helps!

The answer is simple, use: // need to add either http or https before

In this way my app connects to the correct server at runtime.

I have a single distribution - works well.

Final note: for localhost and local server you may need to define the local server. Solved easy by looking for ‘localhost’ in the reply.
Hope it helps.