Unable to create create-Reaction-app project with custom PUBLIC_URL

Question

I'm trying to

PUBLIC_URL=http://xxxx.com npm run build

with a project created using the latest create-respond script.

However, the entries %PUBLIC_URL%in public/index.htmlare replaced by an empty string, not the expected value PUBLIC_URL.

public/index.html contains such a code

<script src="%PUBLIC_URL%/static/js/jarvis.widget.min.js"></script>

The search hours on the Internet show that very little is written about PUBLIC_URL. I cloned a create-reaction-application from GitHub and looked at the code, but have not yet received enlightenment.

Anyone have suggestions on what I'm doing wrong?

Answer 1

, homepage package.json. npm run build :

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.imtqy.com/myapp",

package.json, .

{
  // ...
  "scripts": {
    // ...
  },
  "homepage": "https://example.com"
}

, homepage, PUBLIC_URL, :

The project was built assuming it is hosted at https://example.com.
You can control this with the homepage field in your package.json.

Answer 2

, PUBLIC_URL. , PUBLIC_URL HTML:

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

JavaScript:

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using 'import' for getting asset URLs
  // as described in "Adding Images and Fonts" above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

PUBLIC_URL - , , Webpack.

, CRA src/index.js:

console.log('public url: ', process.env.PUBLIC_URL)

, URL .

CRA.

Answer 3

, - build:

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

https://dsomething.cloudfront.net homepage package.json .

1.

:
()

set PUBLIC_URL=https://dsomething.cloudfront.net&&npm run build' 

(Linux)

PUBLIC_URL=https://dsomething.cloudfront.net npm run build

(Mac)
-- --

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

index.html

2.

.env .env ( , package.json).
( URL):

PUBLIC_URL=https://dsomething.cloudfront.net

(npm run build)
index.html :

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

3.

package.json
"homepage": " http://://dsomething.cloudfront.net ",

index.html :

<script type="text/javascript" src="//dsomething.cloudfront.net/static/js/main.ec7f8972.js">

, :

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

.

Github Github

Answer 4

. .env, PUBLIC_URL

, -

( ). CDN .

Answer 5

.

Windows (cmd.exe)

set PUBLIC_URL=http://xxxx.com&&npm start

(: .)

Linux, macOS (Bash)

 PUBLIC_URL=http://xxxx.com npm start

: cross-env

{
  "scripts": {
    "serve": "cross-env PUBLIC_URL=http://xxxx.com npm start"
  }
}

ref: create--app/README.md # ------ master · facebookincubator/create--app

Answer 6

, , PUBLIC_URL process.env.PUBLIC_URL .

create-- PUBLIC_URL:

1. , package.json.
2. process.env.

PUBLIC_URL package.json. URL , . .

Process.env.PUBLIC_URL - PUBLIC_URL .

,

PUBLIC_URL=http://example.com npm run build

React

process.env.PUBLIC_URL === ''

PUBLIC_URL=http://example.com/foo npm run build

React

process.env.PUBLIC_URL === '/foo'

Answer 7

, . , PUBLIC_URL homepage

const envPublicUrl = process.env.PUBLIC_URL;
...
const getPublicUrl = appPackageJson =>
  envPublicUrl || require(appPackageJson).homepage;

, , .

Answer 8

REACT_APP_ , create-response-app , REACT_APP_, PUBLIC_URL, , @redbmk, homepage package.json.

Answer 9

, github.

,

, app.tsx, . , , <BrowserRouter basename="/Seans-TypeScript-ReactJS-Redux-Boilerplate/">

, URL-, . basename GitHub. , GitHub .

, .

, GitHub

https://sean-bradley.imtqy.com/Seans-TypeScript-ReactJS-Redux-Boilerplate/

Answer 10

.

  Npm Run Eject

scripts/build.js "use strict"

'use strict';
....
process.env.PUBLIC_URL = './' 
// Provide the (current) path which you want to set here.
.....

  npm run build