web-dev-qa-db-fra.com

Firebase n'exécutant pas le fichier index.html

Je suis un nouveau programmeur qui suit le didacticiel de Firebase. J'ai parcouru les étapes 1 à 5 du didacticiel (/ - https://codelabs.developers.google.com/codelabs/firebase-web/#5 ). J'ai ajouté le code js "Ajouter Firebase à votre application Web" au fichier html et configuré la CLI de Firebase. Cependant, lorsque j'exécute le serveur firebase, tout semble fonctionner, à part qu'il ne montre pas le code du fichier index.html. 

Je suis dans le bon répertoire et ma console affiche le message "Le serveur écoute à: http: // localhost: 5000 ." Mais, sur localhost 5000, il affiche un message générique "Bienvenue dans Firebase Hosting: vous constatez cela parce que vous avez correctement configuré Firebase Hosting. Il est maintenant temps de créer quelque chose d'extraordinaire!" plutôt que le code d’interface de l’application dans le fichier index.html. C'est le seul fichier html de mon répertoire. Il semble que je manque quelque chose de très simple. Merci de votre aide.

htmlfirebasefirebase-hostingfirebase-tools
11
user2292210

J'ai compris ma réponse. Le fichier index.html en cours de publication se trouvait dans le fichier "public" créé lors de l'étape "firebase init". J'ai remplacé ce fichier HTML réservé à celui de mon application.

19
user2292210

Le problème est que firebase init est incroyablement grossier. Il remplace simplement le fichier index.html qui se trouvait dans votre dossier public ... sans confirmation, sans filet de sécurité, sans rien.

Le seul moyen de résoudre ce problème est de reproduire votre propre fichier index.html . Si vous ne disposez pas d'une sauvegarde ou d'un autre moyen de reproduire votre fichier index.html ... eh bien ... tant pis!

Généralement, les étapes d'une configuration firebase avec webpack (ou d'autres outils de compilation) se présentent un peu comme ceci:

  1. firebase login
  2. firebase init
  3. your-build-command-here
  4. firebase deploy

Notez que vous devez uniquement exécuter les deux premières étapes la première fois lorsque vous configurez la construction sur cette machine (ou peut-être lorsqu'une nouvelle révision de base de feu a été publiée). Pour redéployer, c'est simplement:

  1. your-build-command-here
  2. firebase deploy

METTRE À JOUR

Dans la dernière version, il vous demande au moins si elle doit remplacer ou non :)

11
Domi

Hébergement Firebase ne s'affiche pas?

Il pourrait y avoir deux raisons à ce problème

1ère étape:

Assurez-vous que votre dossier public (défini dans votre firebase.json) 'dist' contenant l'index.html n'a pas été modifié par la commande firebase init, si oui, remplacez-le par votre projet d'origine index.html

pour référence (dist est standard mais votre peut être différent)

{ "hosting": { "public": "dist"} }

2ème étape:

Assurez-vous de configurer votre href de base dans l'index du projet .html

comme

<base href="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/">

et d'autres fichiers bundle comme

<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/runtime.a66f828dca56eeb90e02.js">


<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/main.2eb2046276073df361f7.js">

3ème étape commande d'exécution - firebase deploy

prendre plaisir ! ;)

4
Hammad J

Pour angular 2 ou 6 with cli, utilisez . (dist) comme répertoire public,

$ ng build --prod
$ cd dist/
$ firebase init
 ? What do you want to use as your public directory? .
 ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
 ? File ./index.html already exists. Overwrite? No
$ firebase deploy
4
All Іѕ Vаиітy

Pour déployer une application angulaire sur Firebase, un tutoriel simple et rapide Vous pouvez trouver ici .

Pendant le processus de firebase init, type N, lorsque la question "Fichier dist/index.html existe déjà. Écraser?" apparaît et votre page sera affichée comme il se doit.

2
Semir Deljić

Dans l'option de dossier public, écrivez dist/votre nom de dossier . Cela vous permettra de rendre votre fichier d'index qui se trouve dans votre dossier.

1
Arshi

S'il vous plaît suivez l'étape

npm install -g firebase-tools

Si vous avez déjà un dossier dist, supprimez-le du répertoire 

firebase login
ng build --prod
firebase init
firebase deploy
0
Tharindu Gihan

Dans mon cas, lorsque je lance la commande ng build --prod, il crée un sous-dossier dans le dossier dist. Supposons que mon nom de projet est FirstProject. Je peux voir un sous-dossier appelé FirstProject dans le dossier dist (dist/FirstProject) . Donnez dist/[subDirectory] comme répertoire public

What do you want to use as your public directory? dist/FirstProject

Cela a résolu mon problème 

0
Gihanmu
npm install -g firebase-tools
firebase login
firebase init
firebase deploy
firebase open

Sélectionnez ce qui suit après avoir fait défiler

  Hosting: Deployed Site
0
coder2017