Firebase deploy displays Welcome Screen with no App Content Firebase deploy displays

Question

I faced a problem with my angular application (6.0.0) when I try to deploy it on firbase.

It shows "Firebase Welcome setup page always". I read all the blogs which are already posted with same problem and follow same instructions what they have suggested. Still I am unable to render my application page eventhough I have replaced index.html file with dist folder index.html. I don't know from where this "Firebase Welcome Setup Page" is comming . I spent almost 2 days to find the solution but failed.

Could you Please help in this regards.

Thank you

My Project Json file:-

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ng-bootstrap/ng-bootstrap": "^3.3.1",
    "angularfire2": "^5.0.0-rc.6",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "firebase": "^4.12.1",
    "firebase-tools": "^5.1.1",
    "g": "^2.0.1",
    "ngx-bootstrap": "^3.0.1",
    "rxjs": "~6.2.0",
    "rxjs-compat": "^6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.4",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

**I just mention here my steps to deploy:-**

C:\Users\User\Desktop\hello-world>firebase login
Already logged in as subratamitra2011@gmail.com
C:\Users\User\Desktop\hello-world>firebase init

 ######## #### ########  ######## ########     ###     ######  ########
 ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
 ######    ##  ########  ######   ########  #########  ######  ######
 ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
 ##       #### ##     ## ######## ########  ##     ##  ######  ########
You're about to initialize a Firebase project in this directory:
C:\Users\User\Desktop\hello-world
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
=== 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.
? Select a default Firebase project for this directory: helloworld-591c4 (helloworld)
i Using project helloworld-591c4 (helloworld)
=== 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.
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
+ Wrote dist/404.html
+ Wrote dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
Firebase initialization complete!
C:\Users\User\Desktop\hello-world>ng build --prod
Date: 2018-10-22T04:10:50.394Z
Hash: d2fabf219965cc523f24
Time: 19752ms
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.44 kB [entry] [rendered]
chunk {1} main.9127db5a4ec3dfb85364.js (main) 746 kB [initial] [rendered]
chunk {2} polyfills.9d02003b6ccac27ce6ad.js (polyfills) 64.3 kB [initial] [rendered]
chunk {3} styles.cc25d04069d157e07245.css (styles) 128 kB [initial] [rendered]
C:\Users\User\Desktop\hello-world>firebase deploy
=== Deploying to 'helloworld-591c4'...
i deploying hosting
i hosting[helloworld-591c4]: beginning deploy...
i hosting[helloworld-591c4]: found 9 files in dist
+ hosting[helloworld-591c4]: file upload complete
i hosting[helloworld-591c4]: finalizing version...
+ hosting[helloworld-591c4]: version finalized
i hosting[helloworld-591c4]: releasing new version...
+ hosting[helloworld-591c4]: release complete
Deploy complete!
Project Console: https://console.firebase.google.com/project/helloworld-591c4/overview
Hosting URL: https://helloworld-591c4.firebaseapp.com

Now with that url it is showing default page because of this:-

https://i.sstatic.net/gYJXs.jpg

Then I change dist/index.html with my project index.html and build again

This is my project Index.html:- https://i.sstatic.net/xqRzU.jpg

   

<!-- begin snippet: js hide: false console: true babel: false -->

DIST/MYPROJECT/INDEX.HTML https://i.sstatic.net/15riG.jpg

Now I got a blank page with that url. Could you please help to find out my errors. Thank you, with regards, Subrata Mitra`

Answer 1

If your dist folder contains a folder with the name of your App, change your firebase.json:
"public": "dist", to "public": "dist/MyApp",

Example:
If your App is called "ShoppingList". Your firebase.json has to look like this:

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

Answer 2

My issue in this case was the fact that "firebase deploy" was taking files in the public folder as specified while doing the first init. Yet using react, your static site is built in a different folder ("build" in my case)

So as per Rodiwa's post, you have to rerun "firebase init" and specify the folder you need to upload.

Answer 3

I had a similar issue when I was deploying a React project (Create React App) using firebase. The issue on my end was that when I initially setup firebase init, I used the default build folder name that is provided by firebase - /public. But as it turns out, whenever I used to build my project, it would build to a different folder /build. So I ran a firebase init again and this time around specified the build folder.

So, you might wanna check if the folder that you're building to is specified correctly.

Also, are you also building your project before you deploy?

UPDATE - If you prefer to use dist as your build folder, setup firebase that way.

1. Run firebase init again.
2. In one of the steps, it asks you if you want to rename build folder. Default is public. Here, type dist and press enter.
3. Complete rest of firebase init steps.
4. Build your project again.
5. Run firebase deploy.

Now try running your website on the URL provided by firebase in terminal.