{}

Deploy Angular project to Firebase hosting

This tutorial assumes that you have an angular project ready and that you have already created a project inside firebase, so we will just focusing on deploying the angular project to firebase.

1. Install the Firebase CLI

The Firebase CLI (Command Line Interface) requires Node.js and npm, which can both be installed by following the instructions on https://nodejs.org/. Installing Node.js also installs npm.

Once you have Node.js and npm installed, you can install the Firebase CLI via npm:

npm install -g firebase-tools

This installs the globally available firebase command. To update to the latest version, simply re-run the same command.

2. Login to firebase

firebase login

This will open the browser window and allow us to login from there.

3. Initialize your app

Once you've chosen the Firebase app you'd like to deploy, cd into your project directory and run the command:

firebase init

Running the firebase init command creates a firebase.json settings file in the root of your project directory. You can learn more about this file in the Customize Hosting Behavior section of the guide.

Here are a list of questions firebase will ask:

  1. Are you ready to proceed? Yes
  2. Which firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
  3. Select a default Firebase project? Choose the project you wish to  set in your firebase account
  4. What do you want to use as your public directory? dist (Firebase set "public" as the default directory folder, but since angular deploys the project to the "dist" folder, we need to set the directory as "dist", if you missed this step, don't worry, you can easily change the public directory in the firebase.json file created by firebase once you have completed your initiation)
  5. Configure as a single-app page? Yes

 This will create two brand new files: .firebaserc and firebase.json

.firebaserc links to the firebase project we've chosen in step 3 when you initiate with firebase.

{
  "projects": {
    "default": "ultimate-travel-app"
  }
}

 firebase.json set the hosting folder and rewrite rules, you can also put your ignore here. This is where you can change your directory folder if you've made a mistake in step 4

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

4. Deploying your app

To deploy our angular project to firebase, we will first need to create our production/development files using the following angular command:

ng build --prod

this will create a new folder called dist which will contain all the necessary files to deploy to firebase hosting.

Once we have the dist folder, there is only one last step

firebase deploy

Our app is now ready and deployed to firebase hosting, open the hosting url and see your app in action!

Leave a comment