Deploying Angular app to Firebase

Deploying Angular app to Firebase

Step by step guide on how to deploy Angular project to Firebase.

I uploaded a video tutorial regarding this. You can watch it here:

Pre-requisite: This tutorial expects that you already have a ready-made project. If you wanted to learn more about Angular, visit this site.

Note: We are going to use the project that I made while following Angular's tutorial.

Setup firebase account

  1. So first, we have to create a new project for firebase. To do that, navigate to firebase console. It will ask you to login using your Gmail account.

  2. After logging in, click on the "Add project" button.
    new project in firebase.PNG

  3. Give your project a name.
    create project.PNG

  4. Click on "Continue" button up to step 3. For step 3, you can choose the default or just create a new one. For this sample, let's just choose the default. After that click on the "Create Project" button.
    googleAcct.PNG

Build Angular project

  1. Now back to our project. First, let's open our cmd and navigate the project root folder. Use the cd command: cd c:\angular project
    cmd 1.PNG

  2. After that, run this command:
    ng build --prod
    build.PNG

This is an angular cli command which means that you are initiating a build process that will optimize our app for production. Bundling and modification will take place and will be put in a dist folder.

If everything is successful, you will see a folder named "dist" is created.

build done.PNG

Install and connect to Firebase

  1. Next, install firebase globally using this command:
    npm install -g firebase-tools
    install firebase.PNG

  2. We can now use firebase commands. Still from your cmd, type:
    firebase login

  3. Firebase will then ask you if you allow them to collect CLI usage and error for reporting. For now, choose not to.
    login to firebase.PNG

  4. This will redirect you directly to the website to authenticate and allow firebase to your Gmail account. Choose the account you will use and allow Firebase to your account.
    login to gmail.PNG
    authenticate.PNG

Back to our console, you will see this if everything is successful.

success login.PNG

Let's now deploy!

  1. Type this command to your console:
    firebase init
    firebase init.PNG

  2. Next, type y (yes) to confirm your action to proceed.
    ready to proceed.PNG

  3. As we are going to do hosting, select the "Hosting" option. Navigate the options using the down key and hit the space key to select. After that press enter to confirm the selection.
    hosting select.PNG

  4. The console will ask you what project are you going to use. Since we already set up our Firebase account and project, choose "Use an existing project".
    use existing project.PNG

  5. Now choose the project you are going to use. Since I only have one under my Firebase account, I can only see the project I have created earlier:
    select project.PNG

  6. Next, firebase will then ask us what public directory are we going to use for the deployment. In this case, it is the folder dist\angular-tour-of-heroes. Type this in the console.

  7. Next, answer Y (Yes) and N (No) for the next 2 questions:
    yes no.PNG

    A very important to take note of the question whether you wanted to overwrite index.html: is that if you choose Yes to it, Firebase will replace your index.html to something that you are not intended to be displayed in your site. lol

  8. Initialization is now complete! We can now deploy our project. Type this in your console:
    firebase deploy
    It may take a while depending on how big your application is.

Congrats! You have successfully deployed your very first Angular app in Firebase. Console should displayed the URL for your app. This is what mine looks like