Angular is front-end framework that’s focused on declarative templating, dependency injection and integrates some of the best practices to make web development less challenging. Angular’s architecture is structured around components that are reusable and is built in a way that helps developers write code for the web, mobile and the desktop.
In this tutorial, we are going to have at our options for quickly deploying an Angular application and some of the challenges that you might come across.
Let’s have a look at Angular CLI first
Angular CLI is the official command-line tool that lets you generate, build, debug and serve Angular applications them and run tests and deploy them.This is an essential tool that you can use to create recommended boilerplates for your Angular application. To install Angular CLI, you can use the following npm command:
npm install -g @angular/cli
ng new demoFirebaseApp
cd demoFirebaseApp ng serve
Setting up a Firebase Account
You will need to create a Firebase account to be able to deploy your application and make it publicly available.Why Firebase? We’re choosing Firebase over other alternatives because it’s easy to set up and you can have your Angular application up and running under a couple of minutes.
Apart from Firebase, there’s Amazon S3 which is also ideal for file storage. For actual production builds, you can also use AWS toolkit to automate the build process.
With AWS, you can set up redundant S3 buckets or use third-party backup tools for AWS so that there is no disruption while uploading new production builds.
This helps you push your releases faster and goes well with the principle, “Automate everything”.
Moving on, here are the steps that you need to follow to set up your Firebase account.
- Create a firebase account if you haven’t already. Click the Add Project button to create a new project.
- Give your project a good name. We’re going to name it “Demo Firebase App”. You can also choose the subdomain for your app. Your app will be hosted at subdomain.firebase-app.com.
Installing the Firebase Tools
To deploy your Firebase project, you’d need to install firebase-tools which is a toolbelt that comprises of Firebase authentication and deployment.To install Firebase tools, you can use npm.
npm install -g firebase-tools
Open the link, log in to your Google account the way that you usually do and if everything goes well, you will see the login success page.
Using Firebase In Our Angular App
In this step, we’re going to use the firebase CLI too initialize a firebase repository inside our project and then use it to push the build version into the Firebase storage.firebase init
> Which Firebase CLI features do you want to set up for this folder? (Press Space to select features, then Enter to confirm your choices) Hosting: Configure and deploy Firebase Hosting sites
> Select a default Firebase project for this directory: demo-angular-app (demoangularapplication)
> What do you want to use as your public directory? dist
> Configure as a single-page app (rewrite all urls to /index.html)? Yes
The default firebase project corresponds to the project that we created earlier. For the third question, make sure that the name of the public directory is dist. This is important because Angular places the builds in the dist directory.
The details entered here are configurable. Firebase creates two files .firebaserc and firebase.json. Feel free to open the files to see the contents.
Deploy Your Application
To deploy your Angular application, you can use the CLI tool to generate a build and then use the firebase toolkit to deploy into the cloud. Generating a build is easy with Angular CLI.ng build
vendor.bundle.js 2.2 MB polyfills.bundle.js 163 KB main.bundle.js 13 KB inline.bundle.js 6 KB styles.bundle.js 10 KB
ng build --prod
If you’re curious to know the exact difference in sizes, here’s the file sizes now.
vendor.bundle.js 352 KB // Reduced from 2.2 MB polyfills.bundle.js 57 KB // Reduced from 163 KB main.bundle.js 12 KB // Reduced from 13 KB inline.bundle.js 2 KB // Reduced from 6 KB styles.bundle.js 0 KB // Reduced from 10 KB
The actual deployment is just a command away now.
firebase deploy
i deploying hosting i hosting: preparing dist directory for upload... hosting: 8 files uploaded successfully
Deploy complete!
Project Console: https://console.firebase.google.com/project/demoangularapplication/overview Hosting URL: https://demoangularapplication.firebaseapp.com
"scripts": { ... "deploy": "ng build --prod && firebase deploy" },
Summary
In this post, we’ve covered everything that you need to know about deploying Angular on Firebase. You can then connect Firebase to your domain by going to the console.With Firebase, you can experiment for free and the basic plan is sufficient for almost all development purposes. We hoped you enjoyed reading this. If you have any thoughts, please share them in the comments.