Introduction
We are going to learn to publish an Angular app using Firebase by following these steps.
Publishing the site using Firebase is pretty easy. There are so many ways to publish our Angular app but Firebase makes it very simple and much faster to publish.
Why we choose Firebase
Firebase is a mobile and web application development platform powered by Google. You can say Firebase is a Backend-as-a-Service, apart from SaaS. With Firebase, we do not even need to create APIs so there is no separate back-end needed at all. Tons of services are provided by Firebase. A few of the major services are given below.
- Hosting
- Analytics
- Real-time database
- Storage and Cloud functions
- AdWords and Cloud Messaging
- Notifications
However, in this write-up, we are going to work with Hosting where our Angular app is going to host using the Firebase platform.
If you are new to Firebase, then you can log-in using Gmail account credentials and go to Firebase Console. You will see a console somewhat like the below screenshot.
Now, let's publish an Angular app to Firebase using these steps.
To publish an Angular app, we should have an Angular app created and ready to publish. For that, you can create any new Angular app by following the steps of the command below.
To create the new Angular app, run the below command in the console.
- ng new angulartofirebasehosting
After the new app is created, it's time to install the dependencies by using the following command.
Now, let's run our newly created app by running the command.
You can use any of the two options. The second option automatically opens the browser window and you can see that our Angular app is executed now.
For that, I have already created one Angular project and I am going to publish the same project to Firebase, which looks like the below snap. And my folder structure will be like below.
Now, let's move to the hosting part with Firebase. For that, we need to install a few packages as described below. To work with Firebase, we need to use its Firebase CLI commands, then install by writing in the console npm command,
- npm install firebase-tools
After that, go to the Firebase console and create the new project like below described steps.
- When you click on Add project, it pops up a new screen and it expects your site name to be published. Enter as per your requirement.
As you can see, I have entered the site name as myappliedthoughts but you can use whatever you can, for country let's select the United States,
Our next move is to build our Angular app for production. For that, go to VS Code console and write the below command.
- ng build --prod
-
- OR
-
- npm run build
From both ways, you can build your Angular app into production mode, and build folder will be generated like the below snap.
After the build is completed, now it's time to publish our production-ready Angular application. First of all, we need to log in with Firebase account by writing the command.
By running the above command, you can see after visiting one link, and within second a new browser window automatically generated,
The further step is to choose your Gmail account and allow access for accessing a few details,
As you can see in the above snap, Firebase requested access for,
- Platform services
- Your cloud projects information
- All your Firebase data and settings
- Allowing above requested data to forward you to a success message screen like,
- By the completion of all the above steps, actually you can see the informative message that you are now logged in with firebase-cli,
So far, we are done with firebase login portion, the next move is to initialize Firebase into our project by using the command,
- Then you will be asked a few questions about which service of Firebase you are going to use, in this article we are going to use Firebase hosting,
Project Setup
- Next step is for project-setup, in which we can select any of the projects listed in Firebase,
Hosting Setup
- Our project setup step is completed and now it's time to select the directory for actually hosting our app using /dist directory that previously we have created ,
- Also, there are afew questions asked about rewriting URLs and default not-found pages, choose NO as the option
Firebase Deployment
Great!! Our last step is remaining which is the deployment of our configured app to firebase, for that we should use the command for Firebase deployment:
After using the above command the console provides us information about deployment, and deployment of a successful message:
Bravo, my site is published now, you can open the below URL in the browser,
Also, you can see the actual hosted website using my Firebase:
Conclusion
In this article, we have covered so many topics, which are listed below as a quick read
- Different Firebase services
- Creating and adding projects into Firebase
- Adding firebase tools to our app
- Firebase login using CLI
- Initializing and deploying the Angular app to Firebase
Firebase hosting feature lets you host your website or Android/iOS app by the following few steps, and lets your app be used by the world
I hope you have understood the hosting environment of Firebase; feel free to suggest any modification sif you want. Thanks for reading.