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
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.
After logging in, click on the "Add project" button.
Give your project a name.
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.
Build Angular project
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
After that, run this command:
ng build --prod
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.
Install and connect to Firebase
Next, install firebase globally using this command:
npm install -g firebase-tools
We can now use firebase commands. Still from your cmd, type:
firebase login
Firebase will then ask you if you allow them to collect CLI usage and error for reporting. For now, choose not to.
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.
Back to our console, you will see this if everything is successful.
Let's now deploy!
Type this command to your console:
firebase init
Next, type y (yes) to confirm your action to proceed.
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.
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".
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:
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.
- Next, answer Y (Yes) and N (No) for the next 2 questions:
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
- 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