CODEWITHSUNDEEP
reactjsurlpathreact-routerlocation
Aurélien
Aurélien

Reputation: 261

Get React root url path

I'm creating a react app with create-react-app and react-router. I would like to get the root URL path of my react app as it can be served in a different location :

The links to the different pages are not affected by this difference because react-router handle to-location according to the react root path. Actually, my images are stored in the public path, therefore, I can access it in the base locations: /<page>

<img src={images/example.png}>

but if I'm in a subpage or just if the URL ended with a "/" like /<page>/ 

<img src={images/example.png}>

won't work because browser searches the image at /<page>/images/example.png instead of /images/example.png. Moreover, if I set the image src to /images/example.png It works only on localhost but not in production because in production, browser searches the image at example.com/images/example.png instead of example.com/interface/images/example.png

That's why I need to get the react root URL path. It allows me to get "/" in localhost and "/interface/" in production for example

Thank you for helping

Upvotes: 6

Views: 45711

Answers (3)

Aur&#233;lien
Aur&#233;lien

Reputation: 261

I found the solution: Webpack gets the react root URL in the env variable PUBLIC_URL

The solution is to change the image src :

<img src=`${process.env.PUBLIC_URL}/images/example.png`

it works in production, in development and every other context. Thank you for your help

Upvotes: 19

Fr&#233;bo
Fr&#233;bo

Reputation: 678

This can be done setting the homepage property in package.json.
When building the project, you see a message explaining it:

The project was built assuming it is hosted at the server root. To override this, specify the homepage in your package.json. For example, add this to build it for GitHub Pages:

"homepage": "http://myname.github.io/myapp"

See the documentation: Deployment: Building for relative paths

If you do this, it should also work on production when it works on your local dev environment.

In your case, set "homepage": "https://example.com/interface/" to make it work on production. You don't need additional code for it.

Keep in mind that you may have to import the image paths properly, so that the logic is handled by webpack. You shouldn't have real web paths in your components, just import things from the paths you have in your dev environment and the magic works.

import example from 'images/example.png';
[...]
<img src={example} />

See Adding Images, Fonts and Styles and Using the public folder: When to use the public folder

Upvotes: 7

Danny Burnett
Danny Burnett

Reputation: 1

If I understand your problem correctly, you want to be able to set a different root path based on your development environment vs your production environment.

Fortunately, create-react-app allows you to create environment variables, using a .env file.

You will need one of these files on your local as well as production. Please note you MUST NOT add these files to version control as they usually contain secret keys, and even if they do not it is good practice.

Once you've created a .env file, you will need to prefix all of your environment variables with REACT_APP<environment variable>, so in this case, REACT_APP_ROOT_PATH. You will then need to set it as follows;

REACT_APP_ROOT_PATH=localhost/ for your local environment, and

REACT_APP_ROOT_PATH=example.com/interface/ for your local environment.

For more advanced uses of this feature, here is some documentation: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env

I hope this helps.

Upvotes: 0

Related Questions