0

I want to deploy my angular 4 project on Firebase I had read this link stackoverflow question ..I followed all the steps ( build the project etc.. ) and Firebase gave me a url to see my deployed project. However, on this link I see just this image.

How I am supposed to upload the project?? Is just the build folder enough to upload the whole application or I need to do something more manually??? enter image description here

KENdi
  • 7,576
  • 2
  • 16
  • 31
Vasilis Michail
  • 403
  • 2
  • 6
  • 17
  • 2
    You need to make sure the `public` field in your `firebase.json` is set to the build output directory compiled by Angular. Right now it looks like it's just the default `public` directory. – Michael Bleigh Aug 03 '17 at 18:13
  • 1
    My `firebase.json` currently is `"hosting": { "public": "dist",` and I selected to use dist folder as public directory when I used firebase init command. – Vasilis Michail Aug 03 '17 at 18:23

1 Answers1

1

If you're using @angular/cli to build the project you'll want your firebase.json file to be set up in the following way (disregarding database and other rules):

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

You want to be sure that the firebase.json file is at the same directory level as the .angular-cli.json and the built 'dist' folder generated by the cli.

The structure should look like this:

dist/
e2e/
src/
.angular-cli.json
firebase.json

Run ng build --prod then firebase deploy at the same level as firebase.json and on success go to the URL provided the command line message of firebase-tools. I'd do an "Empty Cache and Hard Reload" to clear the cache if you're using Chrome.

If you go to the firebase console for the project, in the Hosting dashboard, the number of files in the /dist folder should match the number of files listed the most recent entry of "Deployment History".

Hopefully that helps!

Alexander Staroselsky
  • 37,209
  • 15
  • 79
  • 91