Deploy your Angular 6 app into the Web with Firebase

Categories Angular, Deployment, learning, Software Development, Start Coding

I wanted to publish my project to the web, messed arround with github pages for like 4 hours and still did not manage to deploy my Angular 6 app on Github. So I searched for other possibilties and found firebase. With firebase it worked in 10 minutes later. So I decided to leave a tutorial for it.


What is Firebase ?

For those of you who don´t know what Fiebase is I route you to this Medium post which is excellent.


Deploy your Angular App with Firebase

First of all we need to create a account to get access to the firebase console and create a new project.

firebase-console

Creating a project is not that difficult it should be done in like 2 minutes. Now let´s move on and install the firebase CLI tools:

firebase-tools.npm

After successfully installing the firebase-tools this can be checked with firebase -v we can now build our application so that we can deploy it after. For that go into the root directory of your application and build your app using ng build --prod. This will create an dist folder (dist means “distribution”, the compiled code/library).

build-angular

This should create the dist folder which we are going to deploy to firebase.

dist-folder

Now let´s use the firebase CLI


firebase login

Let´s start of with login in to your google account using the firebase CLI just type in firebase login and provide your data. After successful login in you should see this.

firebase-login


firebase init

Next, we will setup a firebase context for the current application. For that, in the same root folder, type firebase init:

Don´t use git bash

Choose hosting, because you want your application to be hosted

firebase-init-hosting

After that go on and choose your project which you want to deploy in my case it is modev-firebase press enter. NOW stop here until you get to the question where firebase ask you if you want to use your public directory. Remember we created a dist folder where our compiled code is waiting to get deployed so type in dist and go on.

firebase-dist-cli

Procced until you get the message Firebase initialization complete!.


firebase deploy

Now the last thing todo is to deploy the app this is done via the command firebase deploy just type it in. And TADAAAAA your App went live to the web.

Here is the result

finally deployment


You now have an brief overview how to deploy your Angular app. All the examples in this blog post have been showing examples, which is more than enough to begin with. If you want to take a look at other article I wrote feel free to visit my blog.

Hope you guys and girls enjoyed reading this as much as I enjoyed writing it. Do you think this tutorial will be of help to someone? Do not hesitate to share. If you liked it, share it somewhere else or subscribe to my blog.

Leave a Reply

Your email address will not be published. Required fields are marked *