Setting base href using Environment variables

Question

Need to set the href value for <base href=""/> tag based on build environment configuration.

Eg:

Staging should have <base href="/staging" />

Prod should have <base href="/" />

Current setup:

Build command:

"build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'",

"build:staging": "REACT_APP_ENV=staging npm run build",

"build:prod": "REACT_APP_ENV=production npm run build",

.env.staging.js:

REACT_APP_BASE_HREF=/staging

index.html:

....

<base href="" + process.env.REACT_APP_API_URL />

....

This doesn't seem to work in index.html. While similar setup works for JS files

(Probably because JS files are parsed and bundled into a single file and the bundler reads the values at that point of time)

Things tried:

index.html:

<base href=process.env.REACT_APP_API_URL />

<base href="process.env.REACT_APP_API_URL" />

<base href="%process.env.REACT_APP_API_URL%" /> (similar to PUBLIC_URL variable)

Setting basename property along with Browser Router also does not solve the problem

Take a look at webpack.DefinePlugin: https://stackoverflow.com/a/30061249/1300562 — quotesBro, Jul 20 '17 at 08:32
Thanks, but did not solve the problem. The process variable is being parsed in JS, but NOT in index.html — Manmeet S. Oberoi, Jul 20 '17 at 09:14
I would go with https://stackoverflow.com/a/35269814/5346095 — Peter, Apr 23 '18 at 10:59

score 8 · Accepted Answer · answered Nov 30 '17 at 08:39

8

This problem was solved. Follow these steps:

In package.json Set homepage key to ""
In .env.staging file Set PUBLIC_URL=/survey
No need to use <base href>. Can be removed from HTML file
Change links for stylesheet to

<link rel="stylesheet" href="%PUBLIC_URL%/vendor/bootstrap/css/bootstrap.min.css">

No need to add process.env

answered Nov 30 '17 at 08:39

Manmeet S. Oberoi

1,082
1
17
29

2

Looking back at this answer, this is right for dev env only. because: on proper ci, you build once, and deploy to multiple servers... once you set the public_url, it uses it on build only – Avihay Menahem Nov 04 '18 at 11:23
Public url is a c-name i suppose, so even with multiple-server deployments, it shouldn't be an issue. – Manmeet S. Oberoi Nov 05 '18 at 13:05
where to fine .env.staging file – Faisal Apr 04 '19 at 18:27
@Faisal this file can be created at the project root level if it does not exist. – Manmeet S. Oberoi Apr 05 '19 at 11:36
You should not consider removing the base href a good answer at all. This is wrong. Please follow the HTML standards and HTTP standard properly! – Dilyan Trayanov Jun 03 '19 at 10:57

Ambroise Rabier · Answer 2 · 2019-10-22T15:12:57.770

You can do:

    <base href="%PUBLIC_URL%/"> <!-- Note the slash at the end -->

PUBLIC_URL is a env variable accessible through process.env.
You can set PUBLIC_URL env variable on your terminal export PUBLIC_URL=/subdir, or your .env (check create-react-app on it, it use dotenv under the hood).
You can also set homepage in package.json to /subdir, it will also work.
PUBLIC_URL, if not set, is taking homepage value.

If you only need to prefix link inside index.html, then you do not need a base tag. The base tag is useful for image link for example, that are inside your components:

If you serve your app in domain.com/ you can do:

<img src="/assets/duck.jpg" />

Instead, if you serve your app in domain.com/subdir/, you can do:

<img src="/subdir/assets/duck.jpg" />

or if you have set the base tag like above:

<img src="assets/duck.jpg" /> <!-- Base tag only work with relative paths, same as ./assets/duck.jpg -->

Note that the above: src="assets/duck.jpg" will also work on your front page (/subdir) without base tag ! The path of the image is relative to the path you are currently on. This mean, that on /subdir/some-route, the web browser will be search at /subdir/some-route/assets/duck.jpg on the server, without a base tag. With a base tag, you can navigate to any route, and each image src path will ignore the path you are currently on, and start from the base tag href prop value.

In case you have background-image in scss (sass) files, I recommend moving it to html, like that:

<section style={{backgroundImage: `url('assets/background-form.jpg')`}}>
 ...

Sass for me, was not compiling with the relative path above. Also, you can try making a relative path to the assets folder ../../public/assets/background-form.jpg, but it will fail due to special restriction ModuleScopePlugin that forbid you to link relative path outside of src folder (see here).

I only need to add prefix in URL wherever %PUBLIC_URL% used, I don't want to add env. PUBLIC_URL or add homepage property in package.json. how can I do that? if I am create env variable it is creating build under one more subfolder. Can you please help me here. Thanks — Vishal Chhodwani, Jan 06 '23 at 09:33

Setting base href using Environment variables

2 Answers2

Linked