Impossible de construire un projet create-react-app avec une PUBLIC_URL personnalisée.

Question

J'essaie

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

avec un projet construit en utilisant la dernière version de create-react-script.

Cependant, les occurrences de %PUBLIC_URL% sur public/index.html sont remplacés par une chaîne vide, et non par la valeur attendue PUBLIC_URL .

public/index.html contient un code comme

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

Des heures de recherche sur Internet et sur stack overflow montrent qu'il y a très peu d'écrits sur le sujet. PUBLIC_URL . J'ai cloné create-react-app depuis GitHub et j'ai parcouru le code mais je n'ai pas encore été éclairé.

Quelqu'un a-t-il des suggestions sur ce que je fais mal ?

Answer 1

Si les autres réponses ne fonctionnent pas pour vous, il y a aussi une homepage dans le champ package.json . Après avoir exécuté npm run build vous devriez obtenir un message comme le suivant :

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",

Il suffit de l'ajouter comme l'un des champs racine dans le champ package.json par exemple

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

Lorsqu'il a été défini avec succès, soit via homepage ou PUBLIC_URL vous devriez plutôt obtenir un message comme celui-ci :

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

Les gens comme moi qui recherchent quelque chose comme ça dans la construction :

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

Ensuite, la mise en place https://dsomething.cloudfront.net a homepage sur package.json ne fonctionnera pas.

1. Solution rapide

Construisez votre projet comme ceci :
(Windows)

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

(linux/mac)

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

Et vous obtiendrez

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

dans votre index.html construit

2. Solution permanente et recommandée

Créez un fichier appelé .env à la racine de votre projet (au même endroit où se trouve le fichier package.json).
Dans ce fichier, écrivez ceci (sans guillemets autour de l'url) :

PUBLIC_URL=https://dsomething.cloudfront.net

Construisez votre projet comme d'habitude ( npm run build )
Cela va également générer un index.html avec :

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

3. Solution bizarre (ne fonctionnera pas dans la dernière version de react-scripts)

Ajoutez ceci dans votre package.json
"homepage" : "http://://dsomething.cloudfront.net",

Ensuite, le fichier index.html sera généré avec :

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

Ce qui revient à dire :

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

dans ma compréhension.

Numéro de Github Commentaire sur Github

Answer 3

Ce n'est pas ainsi que la variable PUBLIC_URL est utilisée. Selon la norme documentation vous pouvez utiliser la PUBLIC_URL dans votre HTML :

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

Ou dans votre 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'} />;
}

Le paramètre PUBLIC_URL n'est pas une valeur que vous définissez à votre guise, mais un moyen de stocker des fichiers dans votre déploiement en dehors du système de construction de Webpack.

Pour afficher cette information, exécutez votre application CRA et ajoutez ceci à l'adresse suivante src/index.js fichier :

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

Vous verrez que l'URL existe déjà.

Plus d'informations dans le Documents de l'ARC .

Answer 4

En fait, la manière de définir les variables d'environnement est différente selon le système d'exploitation.

Windows (cmd.exe)

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

(Note : l'absence d'espace est intentionnelle).

Linux, macOS (Bash)

 PUBLIC_URL=http://xxxx.com npm start

Recommandé : cross-env

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

réf : create-react-app/README.md#adding-temporary-environment-variables-in-your-shell at master - facebookincubator/create-react-app

Answer 5

Jetez un coup d'œil à la documentation . Vous pouvez disposer d'un fichier .env qui récupère l'adresse PUBLIC_URL.

Bien que vous devriez vous rappeler que ce à quoi il sert -

Vous pouvez utiliser cette variable pour forcer les actifs à être référencés mot à mot à l'url que vous fournissez (nom d'hôte inclus). Cela peut être particulièrement particulièrement utile lorsque vous utilisez un CDN pour héberger votre application.