How to Deploy Angular Apps in Firebase..!

Single Page Application Becoming more Popular Day By Day . Usage of Modern javascript Framework like Angular ,React ,Vue etc.. Become More.

I’m Going to Show How we Can Deploy Angular Application To The firebase.create Firebase Account before starting below are the steps to create firebase account.If you have a firebase Account kindly skip this section.

Angular + Firebase

Creating Firebase Project.

1. Go to the Firebase Website .
2. signup with Google If you dont have Google Account Kindly Create one.
3. After login with Google click on Go to Console Button which will appear in navigation tab after sucessfull signin.
4. Click on Create a Project Button and then it will ask Project Name Enter Project Name and Accept The Terms And Click Continue.
5. Now Your Firebase Project Was Created now You Need to add web app configuration to your project.
6. click on web project icon and enter web app name.accept the terms click continue.
7. Now your firebase project is ready.

Creating Angular Project.

If You Have Already Have Angular Project and You are Looking for only deployment kindly skip this step.

1. If you don’t have nodejs installed in your local pc kindly install using this Link.
2. Once Nodejs Installed in your Machine open command prompt type the command “node -v” press enter you will see node version printed if not then there is problem with your installation.
3. After installing nodejs Application kindly run the command “npm install -g @angular/cli” it will install angular command line interface to your pc .
4. Now it’s time to create angular project open command prompt and type the command “ng new <Project name>“
5. Now your Project is sucessfully created.

Time To Deploy Angular Project to firebase.

1. Run command “ng build — prod” inside project Folder.
2. It will Create production build inside dist folder.
3. Now Angular related to stuff was completed lets jump to firebase.
4. First you need install firebase cli in your pc for that run this command in your command prompt “npm i -g firebase-tools”.
5. Above command will install firebase tools globally in your pc.
6. Now you need to login with firebase run firebase command “firebase login” in cmd it will redirect to browser and login with google account in which we have created firebase account previously.
7. After sucessfull login open command prompt inside angular project folder and run the command “firebase init” it will list firebase feature in cmd select “Hosting: Configure and deploy Firebase Hosting sites” by pressing space bar from the keyboard.
8. It will ask the project to be selected for hosting select the project name that we have created previously and press enter.
9. It will ask the production build folder by default it was selected as “public” you need to type “dist” in cmd beacuse our production build located inside dist folder as we did before.
10. firebase initalization was completed sucessfully its time to publish the angular project.
11. inside project folder run the command “ng build — prod” if you didn’t run previously after run the command “firebase deploy” it will push build files to firebase server.
12. After successfull deployment project url will be generated in cmd or you can get the link by going to furebase account inside project and then selecting Hosting menu.
13. Now your project successfully deployed to firebase.