Google FIREBASE Hosting

In this series, I want to introduce you to Google FIREBASE cloud platform. During this course, you will discover that you don’t need to have ‘backend’ to create web app with database, file storage, or authentication. This series consists of five parts:

• Firebase Authentication
• Firebase Realtime Database
• Cloud Firestore
• Firebase Storage
• Firebase Hosting

All examples are provided in Angular 10.

Deploying Angular project with firebase is extremely easy. The first thing that you have to do is install Firebase tool.

npm install -g firebase-tools

Next, we must log in to Firebase (I assume you have already created an account in Firebase if not go to the first article)

firebase login

This command will redirect you to the Firebase login page where you can log in.

Now you can create a project with help of Firebase CL I or on the website.

Creating a project from the website is nothing more than going to the Firebase site and clicking Add Project button 😁. After that, there are 2 wizards where you provide the name of the project.

Next build angular project with prod flag, like this:

ng build --prod

Okay, we have firebase-tool installed and project set, so we are ready to deploy our app. Go to the main folder of your Angular app (this on the package.json level) and execute this command.

firebase init

Firebase init command starts the setup process and create a firebase.json file.

Answer to the first question in the process is Yes (like in the screenshot). Next, using arrows select Hosting: Configure and deploy Firebase Hosting sites and use SPACE BAR to select it.

After that you should see a list of available projects, so choose the one we created earlier and accept it using SPACE BAR. In the next step, you will see question “What do you want to use as your public directory?”. This is the most tricky part, so stay focused. In Angular 10 you must type dist/{{here type name of the project}}. Dist and catalog inside of dist (that is named the same as the project) is created automatically after ng build -prod command. So in case you don’t know what you should write in this step, just go to your main catalog and check.

After that type in Yes for Configure as single-page app and No for File index.htlm already exists. In the end, you will see Firebase initialization complete!

Firebase.json should look like that.

The last step is to deploy an app to Firebase

firebase deploy

Congratulation your app is deployed to the cloud 🏆. Check Firebase dashboard, click on your project, and under hosting you can see the address of your website.

If you do some changes to your project and you want to deploy it just do

ng build --prod

And after that

firebase deploy

If you have any questions don’t hesitate to comment this article I will do my best to answer all questions.

Deploying to Firebase | Cloud Build Documentation | Google Cloud