Firebase hosting setup for Angular app

1. Firstly install node.js on your machine.
# sudo apt-get install nodejs
# sudo apt-get install npm

2. To install the firebase command line tool, use ‘npm’ to install Firebase tools
# npm install -g firebase-tools

3. Sign in to firebase/google account
# firebase login
//This command will redirect you to choose an account for Firebase CLI and after giving permissions you will be able to login to the firebase account.

4. To choose some other google account, use this command:
# firebase logout

5. Go to https://console.firebase.google.com/ and create new Firebase project there.

6. Initialize your project using the following command:
# firebase init

// You will be asked for the following set of questions to set up your project on the firebase.
– It will ask for “Which Firebase CLI features do you want to set up for this folder?”. Please select “Hosting” and continue
– It will ask to choose the default Firebase project/directory, then select project you want to use for your app from the given list.
– It will ask to choose the public directory. For Angular6 app mention “dist/<APP-NAME>” here.
– It will ask “Configure as a single-page app”, mention as yes.
– It will create the “firebase.json” file in your project folder.
– Once these settings will be done, you will see this message “Firebase initialization complete!”

7. Create a production build/dist folder using the following command:
# ng build –prod

8. Use the following command to view your static firebase application locally:
# firebase serve
// It will run the application locally on port:5000

9. Deploy firebase application to firebase hosting using this command:
# firebase deploy

//After successful deployment, you will see this message on console “Deploy complete!” with hosting URL.

– When you will open your ‘https’ application URL in the mobile browser, you will see a message/alert to “Add to Home screen”.
– Click on it will ask for permission to Add to Home screen.
– Once clicked on this icon from home screen, your PWA will open.

Leave a Reply

Your email address will not be published. Required fields are marked *