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.
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:
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).
This should create the
dist folder which we are going to deploy to firebase.
Now let´s use the
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.
Next, we will setup a firebase context for the current application. For that, in the same root folder, type
Don´t use git bash
Choose hosting, because you want your application to be hosted
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.
Procced until you get the message
Firebase initialization complete!.
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
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.