Setting base href using Environment variables

Question

Need to set the href value for tag based on build environment configuration.

Eg:

Staging should have

Answer 1

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).

Answer 2

This problem was solved. Follow these steps:

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

4. Change links for stylesheet to

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

No need to add process.env