Deploy Angular App To Firebase Hosting

Deploy Angular app to Firebase hosting

Hosting an angular app on firebase is really easy.

Prerequisites:

Node and angular-cli.

Steps:

To deploy and app:

1. Create Angular App, or use already created Angular App.
2. Create project in Firebase console. Your app’s url name will be: <project-id>.firebase-app.com
3. Install Firebase tools. In order to deploy to Firebase, we’ll need the Firebase CLI tools

    npm install -g firebase-tools
   

4. Login to Firebase

    firebase login
   

   This will open a browser tab, where you can login.

5. Initiliaze Firebase in your project. Go to your project folder and run this command:

     firebase init
   

   Follwo the steps:

   1. Are you ready to proceed? Yes
   2. Which Firebase CLI features? Hosting (In the future, use whatever you need! Press space to select.)
   3. Select a default Firebase project? (Choose whatever app you created in the earlier steps)
   4. What do you want to use as your public directory? dist (This is important! Angular creates the dist folder.)
   5. Configure as a single-page app? Yes

   Once you initilize the app, two files will be created in the folder: ### .firebaserc

     {
        "projects": {
          "default": "project-id"
        }
     }
   

   ### .firebase.json

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

6. Build Your Angular App

    ng build --prod
   

   This will build your angular application, where you will have a dist folder, inside this folder will be your index.html single page application.

7. Deploy

    firebase deploy
   

   If everything went well, then your application will be deployed and you will see its url on the console.

   Buy me a cup of coffee with ETH: 0x681a83007bC52C0bF42B41263Dc498f9Ef7af02A