Deploying your Angular App to Firebase
Tags: webdev, angular, firebase, typescript
Published: 2020-12-10 19:20:02

So, you have finished building your awesome project, and you want to showcase it to the world. How do you that? There are many options, but using firebase-hosting is one of the easiest and best options.
In this post, we will learn how to deploy our application to firebase.

Let's go 
👉 Head over to your firebase console <a href="firebase.console.com">console.firebase</a>. 
Create a new project. If you do not have a firebase account, create one first, by using this link <a href="firebase.google.com">firebase<a/>.

Once you have created your project, select the empty tag icon, to embed it into a web application.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4pw77it7poaiqlz6eipm.png)

Click the settings icon, then look for the SDK snippets of your project

Upon clicking it, you will be able to find the configuration files, you need to import to your angular project. Copy all the details found in the firebaseConfig object.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nbl882fpfvjj89t2wwcp.png)

👉 Head to your angular application, open the environment.prod.ts and the environment.ts files. Inside of them, you will add the configs you just obtained from your Firebase project, as a key called firebase, and the value being the firebase SDK snippet of your project

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ij9dvcw4vzvpj09dvc3w.png)
Bravo. 👌
👉 Now we need to install some packages to interact with firebase.
So navigate to your project directory using the command-line and type the following;
<h4><i>npm install firebase @angular/firebase</i></h4>

Tip: If you are using vs-code, you can hit ctrl + \` to toggle up your integrated terminal.


👉 Head over to your app.module.ts, and bring in AngularFirebase module from @angular/firebase, equally import your environment.ts file.
Now add the following to your imports array
<h4><i>AngularFireModule.initializeApp(environment.firebase)</i></h4>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sg1nzrd2poasfp7ioj5f.png)

👉 Open your terminal and install firebase-tools, globally
 <h4><i>npm install firebase-tools</i></h4>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/50uyho8be2g05czhh5dk.png)

👉 Once it's done installing, type firebase login. This will display a pop-up on your browser, where you would have to input your firebase credentials.

👉 Once done, you can navigate back to your project folder, and enter <h4><i>firebase init hosting</i></h4> in your terminal. 
This will initialize your app to use firebase hosting and you will have to select the last project you created in firebase.

👉 After this, you will be asked the following question “What do you want to use as your public directory?”.  You must include your application’s name in this field: “dist/YourProjectName.” Which is going to be produced by using ng build --prod. 
👉 Next, specify “yes” to configuring as a single-page application and “no” to overwriting your existing index.html (if applicable).


👉 Now, we can build our application for production.  Just type the following to your terminal <h4><i>ng build --prod</i></h4> . It is going to create our static files needed for deployment.

👉 Finally, enter firebase deploy. The command will deploy your static files to firebase.Once it has finished uploading your content to the internet, it will show you your app's Url.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o3995captzy067kokn3g.png)
👉 Now open your browser, and navigate to that link.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ajbudidbiy6svx044mom.png)

🎊🍾🎉Congrats, you just deployed your application to your firebase🔥🔥.