Search code examples
angularfirebasefirebase-hosting

deploy an Angular app to Firebase but only one files gets uploaded

I deploy an Angular app to Firebase but only one files gets uploaded. I follow a number of tutorials including Get started with Firebase Hosting

After deploy going to Hosting URL: https://book-search-api.firebaseapp.com all I see is additional setup like:

Welcome Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

Here´s my cli output

L:\NetProject\BooksProject\BooksProject\ClientApp>firebase init

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

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

L:\NetProject\BooksProject\BooksProject\ClientApp

Before we get started, keep in mind:

  • You are initializing in an existing Firebase project directory

? 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

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 .firebaserc already has a default project, using book-search-api.

=== 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? client-app ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ? File client-app/index.html already exists. Overwrite? Yes + Wrote client-app/index.html

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

  • Firebase initialization complete!

L:\NetProject\BooksProject\BooksProject\ClientApp>ng build --prod --aot

Date: 2019-06-19T06:54:49.906Z Hash: 0428c1e6725a31f1ae9c Time: 41224ms chunk {0} runtime-es5.741402d1d47331ce975c.js (runtime) 1.41 kB [entry] [rendered] chunk {1} main-es5.1057831c3a881ebea921.js (main) 517 kB [initial] [rendered] chunk {2} polyfills-es5.405730e5ac8f727bd7d7.js (polyfills) 111 kB [initial] [rendered] chunk {3} styles.652a17618ef377c73983.css (styles) 200 kB [initial] [rendered]

Date: 2019-06-19T06:55:19.884Z Hash: c671e9fe8c3d67a7118d Time: 29918ms chunk {0} runtime-es2015.858f8dd898b75fe86926.js (runtime) 1.41 kB [entry] [rendered] chunk {1} main-es2015.e5390b5408abc2d4f8dd.js (main) 449 kB [initial] [rendered] chunk {2} polyfills-es2015.edf60e92366a5a261979.js (polyfills) 36.8 kB [initial] [rendered] chunk {3} styles.652a17618ef377c73983.css (styles) 200 kB [initial] [rendered]

L:\NetProject\BooksProject\BooksProject\ClientApp>firebase deploy -m "commit message" --only hosting

=== Deploying to 'book-search-api'...

i deploying hosting i hosting[book-search-api]: beginning deploy... i hosting[book-search-api]: found 1 files in client-app + hosting[book-search-api]: file upload complete i hosting[book-search-api]: finalizing version... + hosting[book-search-api]: version finalized i hosting[book-search-api]: releasing new version... + hosting[book-search-api]: release complete

  • Deploy complete!

Project Console: https://console.firebase.google.com/project/book-search-api/overview Hosting URL: https://book-search-api.firebaseapp.com

L:\NetProject\BooksProject\BooksProject\ClientApp>

UPDATE

After help from @ShahidIslam I change my firebase.json public attribute from "client-app" to "dist" then I run the

firebase deploy -m "commit message" --only hosting

Now it uploaded files I think because it say

=== Deploying to 'book-search-api'...

i deploying hosting i hosting[book-search-api]: beginning deploy... i hosting[book-search-api]: found 10 files in dist + hosting[book-search-api]: file upload complete i hosting[book-search-api]: finalizing version... + hosting[book-search-api]: version finalized i hosting[book-search-api]: releasing new version... + hosting[book-search-api]: release complete

  • Deploy complete!

Project Console: https://console.firebase.google.com/project/book-search-api/overview Hosting URL: https://book-search-api.firebaseapp.com

When I now go to https://book-search-api.firebaseapp.com

it say:

Page Not Found This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.

Why am I seeing this? You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.

You can also add a 404.html in the root of your site to replace this page with a custom error page.

The project look like this:

enter image description here

Solution

  • when you initialize firebase first time than first check the dist folder.give the location of your complied code(main.js,poly.json,style.js etc) to firebase, when firebase ask public directory, in your case you should have given "dist/ClientApp"
    Your compiled code in ClientApp which is child directory of dist folder modify firebase.json. "public":"dist/ClientApp". firebase the get directory location of compiled code from this property(public), 

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

    }