Firebase 未运行 index.html 文件

Firebase not running index.html file

提问by user2292210

I'm a pretty new programmer going through the Firebase tutorial. I have gone through steps 1-5 of the tutorial (https://codelabs.developers.google.com/codelabs/firebase-web/#5). I've added the "Add Firebase to your web app" js code to the html file, and set up the Firebase CLI. However, when I run the firebase server, everything seems to work other than it is not showing the code from the index.html file.

我是一个非常新的程序员，正在阅读 Firebase 教程。我已经完成了本教程的第 1-5 步（https://codelabs.developers.google.com/codelabs/firebase-web/#5）。我已将“将 Firebase 添加到您的网络应用程序”js 代码添加到 html 文件中，并设置了 Firebase CLI。但是，当我运行 firebase 服务器时，除了没有显示 index.html 文件中的代码之外，一切似乎都在工作。

I am in the right directory, and my console says "Server listening at: http://localhost:5000." But, at localhost 5000, it shows a generic "Welcome to Firebase Hosting: You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!" box rather than the app interface code in the index.html file. It is the only html file in my directory. It seems like I am missing something very simple. Thank you for your help.

我在正确的目录中，我的控制台显示“服务器正在侦听：http://localhost:5000”。但是，在 localhost 5000 上，它显示了一个通用的“欢迎使用 Firebase 托管：您看到这一点是因为您已成功设置 Firebase 托管。现在是时候构建一些非凡的东西了！” 框而不是 index.html 文件中的应用程序界面代码。它是我目录中唯一的 html 文件。似乎我错过了一些非常简单的东西。感谢您的帮助。

回答by user2292210

I figured out my answer. The index.html file that was being posted was in the "public" file, which was created during the "firebase init" stage. I replaced that placeholder html file with the one for my app.

我想出了我的答案。发布的 index.html 文件位于“public”文件中，该文件是在“firebase init”阶段创建的。我用我的应用程序替换了那个占位符 html 文件。

回答by Domi

The problem is firebase initbeing unbelievably crude. It just overrides the index.htmlfile that was in your publicfolder... no confirmation, no safety net, no nothing.

问题是firebase init令人难以置信的粗糙。它只是覆盖了index.html您public文件夹中的文件......没有确认，没有安全网，什么都没有。

The only way to fix this is to re-produce your own index.htmlfile. If you do not have a backup of or other means of re-producing your index.htmlfile... well... too bad!

解决此问题的唯一方法是重新生成您自己的index.html文件。如果您没有备份或其他方法来重新生成您的index.html文件...好吧...太糟糕了！

Generally, the steps of a firebasesetup with webpack (or other build tools) go a little like this:

通常，firebase使用 webpack（或其他构建工具）进行设置的步骤有点像这样：

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

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

Note that you only need to do Step #1 (login) the first time when you setup building on that machine (or maybe when a new firebase revision has been released), and Step #2 (init) the first time to setup development of a new project (i.e. you don't have your firebase.jsonyet which will be created by the initcommand).

请注意，您只需要login在第一次在该机器上设置构建时（或者可能在发布新的 Firebase 修订版时）执行步骤 #1 ( )，并且在第一次设置新版本的开发时执行步骤 #2 ( init)项目（即您还没有firebase.json将通过init命令创建的）。

To re-deploy, it's simply:

要重新部署，只需：

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

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

UPDATE

更新

In the latest version it at least asks you if it should override or not :)

在最新版本中，它至少会询问您是否应该覆盖:)

回答by Hammad J

Firebase hosting not showing up app?

Firebase 托管没有显示应用程序？

There might be two reasons for this problem

这个问题可能有两个原因

1st step:

第一步：

Make sure your public folder (define in your firebase.json) 'dist' containing the index.html hasn't been modified by firebase init command, if yes replace it with your original project index.html

确保您的公共文件夹（在您的 firebase.json 中定义）包含 index.html 的“dist”未被 firebase init 命令修改，如果是，请将其替换为您的原始项目 index.html

for reference (dist is standard but your may different)

供参考（ dist 是标准的，但您可能会有所不同）

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

2nd step:

第二步：

Make sure to configure your base href in project's index.html

确保在项目的 index.html 中配置您的 base href

as

作为

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

and other bundle files as

和其他捆绑文件作为

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

3rd steprun command - firebase deploy

第三步运行命令 - firebase deploy

enjoy ! ;)

请享用 ！;)

回答by All ?? Vаи?тy

For angular 2 or 6 with cli, use .(dist) as the public directory,

对于带有 cli 的 angular 2 或 6，使用.(dist) 作为公共目录，

$ 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

回答by Semir Delji?

For deploying Angular application to Firebase simple and quick tutorial you can find here.

有关将 Angular 应用程序部署到 Firebase 的简单快速教程，您可以在此处找到。

During the process of firebase init, type N, when the question "File dist/index.html already exists. Overwrite?"appears, and your page will be displayed as it should be.

在firebase init的过程中，当出现“File dist/index.html already exists. Overwrite?”的问题时 ，输入 N 。出现，您的页面将按原样显示。

回答by AidenFry

For anyone else comming across this. Try launching in incognito mode - the browser was cached for me.

对于遇到此问题的任何其他人。尝试以隐身模式启动 - 浏览器已为我缓存。

https://stackoverflow.com/a/56468177/2047972

https://stackoverflow.com/a/56468177/2047972

回答by Arshi

In public folder option write dist/your-folder-name. This will allow you to render your index file which is in your folder.

在公共文件夹选项中写入 dist/your-folder-name。这将允许您渲染文件夹中的索引文件。

回答by Gihanmu

In my case when I run the command ng build --prodit created a sub folder under dist folder. Assume my project name is FirstProject. I can see a sub folder called FirstProject inside dist folder (dist/FirstProject). Give dist/[subDirectory] as your public directory

在我的情况下，当我运行该命令时，ng build --prod它在 dist 文件夹下创建了一个子文件夹。假设我的项目名称是 FirstProject。我可以在 dist 文件夹（dist/FirstProject）中看到一个名为 FirstProject 的子文件夹。将 dist/[subDirectory] ​​作为您的公共目录

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

This solved my issue

这解决了我的问题

回答by Chris Conway

In my case firebase was using the wrong directory, also see here: firebase CLI didn't recognize the current project directory for 'firebase init'.While I was expecting firebase to put all created files into my project directory it was totally disconnected and put all files into my /Users/MyUserName directoy and deploying the wrong index.html from there.

在我的情况下，firebase 使用了错误的目录，另请参见此处：firebase CLI 无法识别“firebase init”的当前项目目录。当我期望 firebase 将所有创建的文件放入我的项目目录时，它完全断开连接并将所有文件放入我的 /Users/MyUserName 目录并从那里部署错误的 index.html。

This is how to fix it(no reinstall of firebase needed as suggested in the linked post):

这是修复它的方法（不需要按照链接帖子中的建议重新安装 firebase）：

• delete all created firebase files from /Users/MyUserName directoy (.firebaserc, firebase.json, index.html and dist-folder)
• run firebase init on project directoy
• use dist/projectname as public directory
• Configure as a single-page app "Yes"
• do not overwrite index.html (if you do, make sure to "ng build" again before deploying)
• firebase deploy

• 从 /Users/MyUserName 目录中删除所有创建的 firebase 文件（.firebaserc、firebase.json、index.html 和 dist-folder）
• 在项目目录上运行 firebase init
• 使用 dist/projectname 作为公共目录
• 配置为单页应用程序“是”
• 不要覆盖 index.html（如果这样做，请确保在部署前再次“ng build”）
• 火力基地部署

By the way, for everyone who is using Angular 7, this tutorial about deploying an angular 7 app to firebase hostingwas really helpfull to me.

顺便说一句，对于每个使用 Angular 7 的人来说，这个关于将Angular 7 应用程序部署到 firebase 托管的教程对我真的很有帮助。

回答by Santosh Kadam

I faced similar situation. When we run firebase init it asks couple of questions. At that time we mention the directory path from where firebase will take all files to deploy. Make sure that, directory contain index.html.

我遇到了类似的情况。当我们运行 firebase init 时，它会问几个问题。那时我们提到了 firebase 将从其中部署所有文件的目录路径。确保目录包含 index.html。