Firebase deploy displays Welcome Screen with no App Content

Question

I cloned a quickstart angular application. I run firebase init and firebase deploy, and output shows deploy successful. I naviagate to the url, but it just shows the Welcome screen. Why don't I see my content?

Answer 1

After running: firebase init Few questions will be asked and Reply(In Bold) as follows:

1. Are you ready to proceed? : Yes
2. Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. : Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

3. Select a default Firebase project for this directory: Your firebase Project name

=== Hosting Setup

4. What do you want to use as your public directory? dist
5. Configure as a single-page app (rewrite all urls to /index.html)? No
6. File dist/404.html already exists. Overwrite? No
7. File dist/index.html already exists. Overwrite? No

-----Firebase initialization complete!-----

Now Re-run your app using: ng build (Imp step)

----Deploy----

firebase deploy

Answer 2

The repo I cloned didn't place an index.html file in the /dist directory. The welcome screen is the default index.html that firebase creates.

Answer 3

there is no problem if you ran build and then do firebase init.

After deployment, if you see the welcome screen. Before doing anything just wait for some time and Refresh the page. it worked for me

Answer 4

Important:

---

If you are already tried to deploy the flutter web app project, then 1st remove (1).firebase,(2)build,(3)firebase.json from your project directory root page.

---

then just follow the below 7 steps-->

1 step: First run firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  {project path}\{projectname}

Before we get started, keep in mind:

  * You are currently outside your home directory

2nd step: ? Are you ready to proceed? Yes

3rd step: ? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Actio n deploys

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  Using project ****21ed1 (projectname)

=== Hosting Setup
        
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

4th step: ? What do you want to use as your public directory? build/web

5th step: ? Configure as a single-page app (rewrite all urls to /index.html)? Yes

? Set up automatic builds and deploys with GitHub? **No**
+  Wrote build/web/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

6th step: Then run: flutter build web

 Building with sound null safety 

Compiling lib\main.dart for the Web...                           2,656ms

7th step: Then run: firebase deploy

=== Deploying to '****21ed1'...

i  deploying hosting
i  hosting[****21ed1]: beginning deploy...
i  hosting[****21ed1]: found 15 files in build/web
+  hosting[****21ed1]: file upload complete
i  hosting[****21ed1]: finalizing version...
+  hosting[****21ed1]: version finalized
i  hosting[****21ed1]: releasing new version...
+  hosting[****21ed1]: release complete

+  Deploy complete!

Answer 5

Angular projects aren't built directly inside /dist. They are usually built like /dist/your-project-name

So when you firebase init and you are asked What do you want to use as your public directory? provide it /dist/your-project-name instead of just /dist

And if /dist/your-project-name folder really has your project then it'll surely ask you File dist/your-project-name/index.html already exists. Overwrite?, you say no

In case it didn't ask you about overwriting then it means the public address you gave above is either incorrect or maybe you haven't yet built your project using ng build command.

Answer 6

I had same problem with my deployed react app using Firebase to solve that as suggested above in first answers rebuild your app after running firebase init successfully & before running firebase deploy command. Then deploy your app.

If it's first time then you see welcome screen with hosting documentation. Then wait for few minutes around 15 to 20 minutes, then open app URL. It's running

Answer 7

Update the firebase.json file

 "hosting": {
    "public": "dist/your-app-name"

for ex: my app name is "DataView" and looks like this the firebase config file:

 "hosting": {
    "public": "dist/DataView",

Answer 8

I jsut had this issue, its because I ran a build and then firebase init which caused the /build/index.html file to be overriten.

After you init the firebase project just rerun the build and then deploy.

Answer 9

Don't forget to rebuild you application again before firebase deploy. Your dist folder should be same folder name you setup as the public folder during your firebase init.