Deploying an Angular CLI App to Production with Firebase

Chris Sevilleja
👁️ 22,593 views
💬 comments

Building Angular apps is a fun project. Once you're done building, it's time to expand the fun by sharing your project with the world.

Firebase Home Page

While there's many ways to host our Angular application, we'll be looking at how to host with Firebase since Firebase makes it super simple. Firebase offers many great features (and has a solid free plan).

Table of Contents

    • Realtime Database
    • Hosting
    • Authentication
    • Cloud Functions
    • Cloud Storage
    • Bunch More

    We'll just be using Firebase hosting to handle our Angular app.

    TLDR: What's the Overall Process

    • The Angular CLI will create our dist files: ng build --prod
    • We'll deploy using Firebase command line tools: firebase deploy
    • Firebase will host and handle routing!

    Creating an Angular App

    We'll be using the Angular CLI to create our Angular app that we'll deploy. For more info on the CLI, check out our article: Use the Angular CLI For Faster Angular v2+ Projects.

    Angular CLI Home Page

    Related Video Course: Working with the Angular CLI

    Install the CLI

    If you don't already have the CLI installed, we can do it using Node and npm.

    npm install -g @angular/cli

    Note: The -g flag is to install globally across our entire machine.

    Start an Angular App

    Once we have the CLI, we can create a new Angular app and test it out using the following:

    # create a new app
    ng new hosty-app
    
    # go into our new app
    cd hosty-app
    
    # serve it locally and see it in action
    ng serve --open

    ng serve

    Angular CLI Test App

    Our app is good to go! Let's start setting up our Firebase app.

    Creating the Firebase App

    We'll need to create a Firebase account and a Firebase app so that our application knows where to deploy to. Once you login to your Firebase console, create a new app.

    Firebase Dashboard

    We'll name our app Angular Hosting Test. You can also set the subdomain for your app. Your app will be hosted at subdomain.firebase-app.com.

    Create a Firebase Project

    Our new app is live! That's all we had to do in the Firebase dashboard. The rest of the work will be done on our own computer in our applications.

    Installing the Firebase Tools

    In order to deploy to Firebase, we'll need the Firebase CLI tools. Here's the steps we're about to take:

    • Download the tools
    • Login to Firebase using the tools
    • Link our local app to our Firebase app

    Install the Firebase Tools

    We'll use npm to install similar to how we installed the Angular CLI:

    npm install -g firebase-tools

    Login to Firebase

    We'll use the CLI tools to login to Firebase.

    firebase login

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

    Firebase CLI Login

    Firebase Login Successful

    That's it! We're all ready to start using the Firebase tools.

    Using Firebase In Our Angular App

    The first step is to link our local Angular app to our Firebase app we created in the Firebase dashboard.

    firebase init

    Here's the answers to the questions Firebase tools will ask:

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

    Firebase Init

    You may be asking, what exactly does this command do? This creates two new files:

    .firebaserc: Sets the Firebase project we're linking to

    {
      "projects": {
        "default": "angular-hosting"
      }
    }

    firebase.json: Sets the hosting folder and rewrites

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

    Our app is now linked to our Firebase app. We're ready to finally deploy!

    Deploying

    The deploy is essentially two steps:

    • Create the production files in the dist folder
    • Deploy to Firebase!

    Build Our Angular App

    We'll create our production files using the Angular CLI command:

    ng build --prod

    This will create a brand new dist/ folder in our project with the files necessary to launch our app. You could take these files and open the index.html file locally and see your app running!

    ng build

    Angular CLI Dist Files

    Deploy to Firebase

    Now that we have the dist/ folder, we can tell Firebase to deploy it:

    firebase deploy

    firebase deploy

    Our app is now deployed and ready to view! Run this Firebase command to see it in action:

    firebase open hosting:site

    https://angular-hosting.firebaseapp.com/

    Firebase Hosting Dashboard

    You can visit the Firebase dashboard to see the logs of all your deployments. You can even set a custom domain in the dashboard.

    Firebase Hosting Dashboard

    Extra: Script to Deploy

    If you want to automate the process of building and deploying, you can add a script to your package.json file:

    "scripts": {
      ... 
      "deploy": "ng build --prod && firebase deploy"
    },

    Now we can run the deploy script with:

    npm run deploy

    Watch as both commands run and our site is updated!

    Conclusion

    With Firebase hosting, it's an easy process to deploy our Angular CLI apps to production. In the future we'll be exploring more options with other hosting providers, but Firebase is a fast, free, and easy way to host quick Angular apps.

    Chris Sevilleja

    176 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.