Deploy Angular App to Firebase

on

In this article, I am going to cover how to create an Angular app up and running and then deploy it to Firebase using Angular CLI. First, let's looks at to install the Angular CLI.

What is Angular CLI?

Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box
 As the name implies, it is a command-line tool for creating angular apps. It is recommended to use angular cli for creating angular apps as you don't need to spend time installing and configuring all the required dependencies and wiring everything together.
Install angular-cli via NPM running the following command
 npm install -g @angular/cli




Step 1

Once installed angular-cli we can create a new Angular app by running the following command.


ng new test-app





Step 2

Next open newly created test-app using your favorite editor. Then run following command.



ng serve





If we browse to localhost:4200 You should see something similar to this.











Step 3

Change output path in angular.json to dist, so the line will look like this.


"outputhPath": "dist"











Step 4



Now we will use Firebase CLI to deploy our test-app. First we will need to log into Firebase then go to Firebase console. Once in the console select “Create New Project”. For our project we will name it “test-app”.



















Step 5



Next we need to install Firebase CLI via NPM. In your console run the following command.



 npm install -g firebase-tools



Once you installed above command after that run the following command.


firebase login











Step 6





At the root of your Angular test-app project run the following command. 


firebase init












This will continue through the steps of setting up your app to be deployable to Firebase hosting.Here's the answers to the questions Firebase tools will ask



    

  • Are you ready to proceed? Yes

    • 

  • Which Firebase CLI features? Hosting (In the future, use whatever you need! Press space to select.)
    • 

  • Select a default Firebase project? Angular Hosting Test (Choose whatever app you created in the earlier steps)
    • 

  • What do you want to use as your public directory? dist (This is important! Angular creates the dist folder.)
    • 

  • Configure as a single-page app? Yes
    • 
























Step 7



We will build our production packages using the following Angular CLI command.


ng build --prod




























Step 8

Now our test-app is ready for the deployment. In the root of your app you should have a firebase.json file that helps the Firebase CLI which knows how to deploy our application.Now run the following command.



firebase deploy











Run the following command and see your output.


firebase open hosting:site




























































Comments











Post a Comment