14

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

Improve this question
3

2 Answers 2

Reset to default
8

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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
Public url is a c-name i suppose, so even with multiple-server deployments, it shouldn't be an issue.
where to fine .env.staging file
@Faisal this file can be created at the project root level if it does not exist.
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!
2

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

Improve this answer

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.