Deploy And Host Angular Project On Firebase Free Hosting

Deploy And Host Angular Project On Firebase Free Hosting

1) Create a new Angular project using this command.

ng new project_name

2) Build your Angular project using this command, And make sure your build output path like "dist/AngCovid" on angular.json path.

ng build --pord

"build": {

....

"outputPath": "dist/AngCovid"

....

},

3) Make sure you have Firebase account. If you don't have account, then create a account here: https://firebase.google.com/

4) Go to firebase console and create a project, for example we create a project name as "AngCovidTracker". 

5) Go to hosting page then click on Get Started 

6) Follow those step given by firebase hosting

• Install Firebase CLI: $ npm install -g firebase-tools
• Initialize your project: 
• Sign in to Google: $ firebase login
• Initiate your project: $ firebase init

• Are you ready to procees? --> Press Y
• Which Firebase features do you want to set up for this directory? (Use arrow keys) (Press <space> to select then hit enter) --> Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
• Please select an option: (Use arrow keys) --> Use an existing project. Then select your firebase project neme
• What do you want to use as your public directory? --> Enter your dist folder project path. Like, dist/AngCovid
• Configure as a single-page app (rewrite all urls to /index.html)? --> Press N
• Set up automatic builds and deploys with GitHub? --> Press N (If you want automatic builds and deploys with GitHub, then press Y)
• Deploy to Firebase Hosting --> $ firebase deploy

7) That's all. Now the Deployment is completed!

     Open the "Hosting URL" to see the hosted application on Firebase. 

IF YOUR HAVE ANY WORNING LIKE THIS, THEN PLEASE FOLLOW THOSE STEP

index.html file has that firebase default information.That's why it is showing that information.

First: Copy your index.html file replace with dist folder index.html file

Second: Open firebase.json file and add this 

"rewrites": [

    {

        "source": "**",

        "destination": "/index.html"

    }

]

Third: Deploy again to Firebase Hosting, following commend $ firebase deploy

That's all. Open the "Hosting URL" to see the hosted application on Firebase.