web-dev-qa-db-fra.com

Hébergement Firebase + Réagissez avec WebPack

Existe-t-il un moyen d’ajouter un hébergement Firebase au projet React qui utilise Webpack? Plus précisément, j'essaie de l'ajouter à https://github.com/mxstbr/react-boilerplate

Ceci est mon fichier firebase.json

{
  "hosting": {
    "firebase": "name",
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Lorsque j'appelle firebase serve, la page est vide. Cependant, si je fais npm start, l'application fonctionne correctement. Ainsi, le code JS/React n’est pas injecté dans le fichier index.html, qui est 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome to Firebase Hosting</title>
  </head>
  <head>
    <!-- The first thing in any HTML file should be the charset -->
    <meta charset="utf-8">
    <!-- Make the page mobile compatible -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Allow installing the app to the homescreen -->
    <link rel="manifest" href="manifest.json">
    <meta name="mobile-web-app-capable" content="yes">
    <title>React.js Boilerplate</title>
  </head>
  <!-- The app hooks into this div -->
  <!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
  <body>
  <div id="app"></div>
  <div id="message">
      <h1>Welcome to Firebase Hosting</h1>
    </div>
  </body>
</html>
reactjsfirebasefirebase-hostingreactfire
10
astiefel

J'utilise le package create-react-app pour créer mon application de réaction. Appelez la commande "npm run build". Cela génère un répertoire "build" qui inclut la sortie du webpack. Dans votre fichier firebase.json, pointez plutôt vers le répertoire "build". Ensuite, exécutez la commande "firebase serve" ou "firebase deploy".

"hosting": {
  "public": "build",
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}
16
caritos

Dans votre cas particulier, lorsque vous rencontrez un fichier d’index demo/raw/boiler-plate qui, je suppose, se trouverait dans le répertoire '/ app /'. Vous pouvez remplacer cela par votre application originale index.html et vous avez terminé. 

Autres astuces d’aide (vous pouvez conserver votre répertoire app à la place et l’utiliser comme public en lisant ceci):

Astuce 1: Lorsque vous déployez l'application sur Firebase et tentez d'accéder à une application de navigateur (en particulier React, Redux ), vous risquez d'obtenir une erreur indiquant: 

ne trouve pas le module "run" dans bundle.js

Donc, comme mentionné dans la réponse, il est indispensable, et après cela, vous devez exécuter la commande: 

npm start
Cette commande va régénérer le bundle.js et ne comprendra pas/nécessite le "run" module que nous utilisions pendant le développement. Ensuite, vous pouvez déployer le dernier fichier bundle.js sur le serveur. 

Astuce 2: Dans webpack.config insideoutput:{...}section, vous devez définirpathetpublicPathdans un nouveau répertoire i.e./public/. Sinon, sur Firebase Host lorsque vous avez mentionné le répertoire "public" comme répertoire par défaut à déployer - le problème sera alors créé et l'application ne s'exécutera pas sur le serveur Firebase.

Remarque: en fait, je ne suis pas sûr et je ne sais pas comment dire à Firebase d'utiliser des fichiers à la racine et non dans mon dossier 'public' Mais je pense que la sortie du Webpack a généré des fichiers et en a les fichiers publics (css, html) dans le dossier public sont corrects sinon. firebase deploy peut télécharger d'autres fichiers situés dans le répertoire racine. (Corrige moi si je me trompe).

Ok, donc finalement, lorsque vous mettez à jour les valeurs webpack.config en tant que:

output: { path: __dirname+ '/public', publicPath: '/public/', filename: 'bundle.js' }

Puis (enfin, assurez-vous que vous avez terminé avec Tip.1 également) et exécutez la commande pour obtenir le dernier fichier bundle.js. 

firebase login et d’autres commandes init avant d’exécuter la dernière commande deploy.
Remarque: La commande "firebase serve" est également utile pour déboguer et tester si l'application fonctionne correctement sur l'ordinateur local, puis sur le serveur Firebase en direct.
1
Muhammad Hannan

J'avais le même problème. @Caritos a raison. Cependant, j'ai trouvé des problèmes supplémentaires. 

1) J'avais besoin d'ajouter du code au fichier HTML:

<script type="text/javascript" src="/bundle.js"></script>

2) Dans le répertoire de construction npm, cette balise de lien n'a pas été construite correctement car elle ne se fermait pas automatiquement:

incorrect:

<link href="/bundle-f9b3749622929f71c476.css" rel="stylesheet">

correct:

<link href="/bundle-f9b3749622929f71c476.css" rel="stylesheet" />

Une fois que j'ai fermé la balise de lien, mon application React s'est déployée.

0
Amanda Koster