All CategoriesFull stack Web Development

Hosting Angular Application in Firebase

What is Firebase?

Firebase is a Backend-as-a-service (BAAS). It makes us free from managing servers. As well as acts as a server, API and data store.
Firebase supports the web, iOS, OS X and Android clients. Here you don’t need to write server side code, or to deploy the server framework to get an app started.

Features of Firebase

  1. It’s a cloud service, so there is no setup involved.
  2. Frameworks like Angular integrates nicely. It is very useful and allows us to create an app in a very short time.
  3. It stores data in JSON format.
  4. As it is a cloud service it cut down development time.
  5. Hosting the application is easy. It serves the files from global CDN with HTTP/2.

Other BAAS

  1. Deployed
  2. Firehose
  3. io
  4. Atmosphere
  5. Hoodie

Steps to Create a project in Firebase.

  1. SIGN IN into Firebase using Google Account. To SIGN IN into account visit this site: – https://firebase.google.com/
  1. Once you sign in to Go to Console. 
  2. In Console click on Create New Project.
  3. After clicking the Create New Project it will open model and ask you to insert project name and Country/Region 
  4. After entering your project name click on Create Project. 
  5. Once Project is created it will navigate to Overview. In Overview go to Hosting tab and click on Get Started. 
  6. It will navigate to Hosting and in that click on Get Started. 
  7. Once you click on Get Started it will Setup  Hosting model and it will give us steps to follow to install firebase in machine.

Install Firebase in machine.

  1. To install firebase in your machine run the follow command in CMD. 
  2.  Once the installation is done, we must log in to firebase through the CMD. To login into firebase through CMD run the below command. 
  3. After running the command, it will prompt a message press that Firebase wants to collect anonymous CLI usage information? Press “N” and it will open your browser for permission. Press allow so that the CLI can have the permission. 
  4. Once you gave the Account Permission to Firebase CLI in CMD you will see the below message. Successfully Logged In. 

Initialization Project.

  1. Before Initialization and deployment of the project, the most important thing to do is to build the Angular application. To build the application (If using Angular CLI) run the below command. 
  2. It will create a dist folder in your Angular application folder. This dist folder is deployed in the Firebase. 
  3. Once all these steps are performed, the next step is to initialize the firebase in the project. Open the project path in CMD and type below command. 

angular

  1. Press Y. It will show the below options. Use the arrow key and select Hosting and press enter. 
  2. It will show all the projects name which have been created in Firebase. Select the appropriate project and click enter. 
  3. It will ask Database Rules. But in the application, we are just hosting the application so we must skip this setting. To skip this setting press, enter without adding any input.
  4. It will create a folder call function and will ask for npm install all the packages required for the same. Press “Y”. It will install the packages which are required. 
  5. Once the dependencies are installed it will ask for the folder name which can be used as a public directory. Enter “dist “, it is the same folder name which we have created using Angular CLI command.
  6. It will ask to rewrite the index.html page to configure as a single-page app. Press “Y” and it will ask for overwriting index.html file from dist Press N and press enter.It will create firebase.json and .firebasesrc file which will be helpful when we deploy the app.

Deploying the application.

  1. To deploy the project run the below command. It will deploy the application and give you the URL where the files been hosted.
  2. To check if the application is deployed properly or not open the browser and navigate to the URL which is provided. If you can see the application running, then you have deployed the application successfully.

Learn more about Angular & get a perfect career for your front end Web development skills by taking up online courses only on acadgild.com

Tags

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close