web-dev-qa-db-fra.com

Page vierge après le déploiement réussi de Firebase

Mon application ReactJs fonctionne correctement sur ma boîte locale, lorsque j'utilise le npm start commande. Cependant, lorsque j'essaie de déployer mon application à l'aide du firebase init à Firebase, je vois une page vierge. Que pourrais-je faire de mal?

Mise à jour : J'ai dû modifier le fichier Firebase.json pour supprimer le

"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"],

ligne que je recevais des erreurs liées à cela.

Firebase.json: 

{
  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "source": "functions"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

Sortie de la commande de déploiement Firebase: 

=== Deploying to 'socialmedia-5ec0a'...

i  deploying database, storage, firestore, functions, hosting
i  database: checking rules syntax...
+  database: rules syntax for database socialmedia-5ec0a is valid
i  storage: checking storage.rules for compilation errors...
+  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
+  firestore: rules file firestore.rules compiled successfully
i  functions: ensuring necessary APIs are enabled...
+  functions: all necessary APIs are enabled
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  functions: preparing functions directory for uploading...
i  hosting[socialmedia-5ec0a]: beginning deploy...
i  hosting[socialmedia-5ec0a]: found 5 files in public
+  hosting[socialmedia-5ec0a]: file upload complete
i  database: releasing rules...
+  database: rules for database socialmedia-5ec0a released successfully
+  storage: released rules storage.rules to firebase.storage/socialmedia-5ec0a.appspot.com
+  firestore: released rules firestore.rules to cloud.firestore
i  hosting[socialmedia-5ec0a]: finalizing version...
+  hosting[socialmedia-5ec0a]: version finalized
i  hosting[socialmedia-5ec0a]: releasing new version...
+  hosting[socialmedia-5ec0a]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/socialmedia-5ec0a/overview
Hosting URL: https://socialmedia-5ec0a.firebaseapp.com

Sortie Chrome F12: enter image description here

reactjsfirebasenpmweb-applicationsweb-deployment
14
Ajit Goel

J'avais le même problème. http: // localhost: 3000 / servait bien l'application mais quand j'ai déployé en utilisant npm run build puis firebase deploy Je voyais juste une page vierge.

Je ne suis pas sûr de la raison, mais j'ai changé la propriété "publique" dans firebase.json en "build" et cela a fonctionné.

voici mon nouveau document firebase.json.

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
5
Will Goodhew

Après avoir initialisé votre application Firebase avec firebase init, vous devriez avoir un fichier firebase.json dans le dossier de votre projet. Le fait est que la clé publique doit pointer vers votre dossier de construction. Par exemple, dans create-react-app, le dossier de construction est build/ après avoir exécuté npm run build pour la première fois. Ensuite, le firebase.json doit ressembler à celui-ci:

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

La clé publique est à construire. Ensuite, essayez un autre déploiement avec firebase deploy .

5
Robin Wieruch

Jetez un œil à la propriété public de vous package.json

"public": "public",

Il pointe vers le dossier de ressources où l'hébergement Firebase recherchera votre application. Si le dossier de ressources est vide, une page vierge vous sera présentée

Lorsque vous générez votre application React, tous les fichiers vont dans le dossier build par défaut, si vous n'avez pas spécifié le contraire. Définissez donc la propriété publique dans votre dossier de build reactjs.

5
Artjom Zabelin

Si la modification de la propriété "publique" dans le fichier firebase.json ne fonctionne pas, recherchez d'abord dans quel dossier se trouve votre fichier index.html, assurez-vous qu'il s'agit bien du fichier index.html que vous avez écrit, car Firebase pourrait mettre une maquette index.html dans le dossier principal et déplacez votre index.html dans un dossier 'build', il pourrait aussi avoir un autre dossier avec le nom de votre application dans le dossier 'build'. Ensuite, vous devez modifier la propriété "public" dans le fichier firebase.json par le nom de ce dossier, comme ceci:

     {
      "hosting": {
        "public": "my-app",
        "ignore": [
          "firebase.json",
          "**/.*",
          "**/node_modules/**"
        ],
        "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ]
      }
    }
0
Aleksandar Malenko

J'ai eu le même problème. Mais après que le dossier de construction a été signalé. . . Je voyais toujours un hôte vierge. Dans ce cas, vous pouvez copier le dossier de construction qui contient le code d'initialisation Firebase et le coller dans le dossier public. Assurez-vous d'ajouter votre <div id=root> </div> dans la section du corps, puis npm run build encore. Assurez-vous également que votre firebase.json pointe vers la génération comme mentionné dans les messages précédents.

0
Matt Wellman

Vérifiez que la propriété homepage n'est pas définie dans package.json. Je l'avais parce que je déployais également sur les pages Github au début. Supprimé, reconstruit, redéployé et travaillé.

0
ariel guzman

Vous pouvez également vérifier si vous changez le firebase.json le fichier ne fonctionne pas.

  1. dans les outils de développement Chrome dev, accédez à Application->Clear Storage
  2. cliquer sur clean site data
  3. puis refresh l'application.

Dans certains cas, cela fonctionne.

0
Daniel Lupascu