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?

Elliott Beach · Answer 1 · 2017-06-15T16:14:57.303

9

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.

edited Jun 15 '17 at 16:14

answered Dec 20 '16 at 20:16

Elliott Beach

10,459
9
28
41

But for a plain html and vanilla javascript app/project,you should consider having all the file in the public folder(it is better if you create at starting) and the run init in the CLI. – Aashiq Jun 17 '20 at 15:46

score 9 · Accepted Answer · answered Jul 05 '18 at 04:15

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

Are you ready to proceed? : Yes
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

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

=== Hosting Setup

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

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

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

----Deploy----

firebase deploy

@VishwaPratap Is your dist folder getting created? If yes, check index.html of dist folder. It should have your app-root content in it and not the welcome content. If it's having welcome content kindly re-build your app by running ng build and then observe the difference. — Saily Jadhav, Jul 20 '18 at 04:38
You can also edit "firebase.json" relative url of the index.html to point to your index page. This is because Firebase generates another index.html page inside a generated "public" folder and this is the one it point to in "firebase.json" — DonKariro, Jul 27 '22 at 08:57

score 7 · Answer 3 · answered Jun 15 '17 at 09:25

7

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.

answered Jun 15 '17 at 09:25

rosscooper

1,976
3
16
29

score 2 · Answer 4 · edited May 16 '21 at 14:39

2

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

edited May 16 '21 at 14:39

Dharman

30,962
25
85
135

answered May 16 '21 at 14:33

Shruthi Gowda

41
2

I've been stuck at this for 2 days and I don't believe this was the solution‍♀️ – Apurva Thorat Oct 05 '22 at 14:29

score 2 · Answer 5 · answered Jul 15 '21 at 13:55

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.

score 0 · Answer 6 · answered Apr 21 '17 at 11:22

0

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.

answered Apr 21 '17 at 11:22

John Edward Escuyos

41
1

how do you rebuild the app again before deploy? – user2763557 May 22 '18 at 14:43
@user2763557 `npm run build` – John May 25 '18 at 16:25
run "npm run build" if you are using React or use "ng build" for Angular. then deploy. – akshay_sushir Apr 18 '20 at 08:36

score 0 · Answer 7 · answered Apr 18 '20 at 08:49

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

score 0 · Answer 8 · answered Oct 30 '20 at 12:22

0

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

answered Oct 30 '20 at 12:22

Botond

630
6
9

score 0 · Answer 9 · answered Mar 15 '22 at 10:03

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!

Firebase deploy displays Welcome Screen with no App Content

9 Answers9

Linked