At Agira, Technology Simplified, Innovation Delivered, and Empowering Business is what we are passionate about. We always strive to build solutions that boost your productivity.

How To Deploy Your Web Application To Firebase Hosting

  • By Sankar Raman
  • May 9, 2018
  • 2976 Views

On the process of elevating the development arena , there are lots of development platforms, and compelling tools were getting introduced every day. Gradually, We have been checking around all the tools. On these lists, Firebase is something distinctive from all which gets the special attention from developers. If you ask why Firebase? Yes, it is! We have got your back to expound the reason!. Walking around the fuzzy platforms, obviously, Firebase is becoming the limelight for developers which reduces the complexity of developing web & mobile apps and enables to perform various operations at one place.
 
On the go, this blog will give you a clear insights of Firebase and the complete set up process of firebase hosting.
 

Topics will be Covered,

 

  • What is Firebase?
  • Features Of Firebase In Development
  • Features Of Firebase In Business
  • Setting Up A Firebase Account
  • Create Project In Firebase
  • Installing Firebase On Your System
  • Deploying Web Application To Firebase
  • Firebase Hosting


What is Firebase?

 
firebase is an integrated platform for mobile & web app development which helps to grow your businesses. Firebase offers diverse features like APIs, multiple authentications, real-time database, and hosting platform to develop and test high-quality apps faster.
 
Alongside it also offers various built-in services from which you can build apps without writing any server code. These built-in services and analytics helps the developers to track their businesses & focus on user experience.


Features Of Firebase In Development

 
Firebase has different core services in development,
 

  1. Real-time database
  2. User authentication
  3. Cloud Functions
  4. Hosting
  5. Crashlytics
  6. Cloud Storage
  7. Test Lab for Android
  8. Cloud Firestore
  9. Performance Monitoring

 

  • We can directly access the firebase features from the android studio. Additionally, the “Test Lab” Android feature is the most fruitful feature for the users. Through which users can able to test their app in various mobile resolution and version.

 

  • An added advantage, The cloud-hosted NoSQL database of firebase that allows the users to store and sync data in real time.

 

  • Real-time syncing would be easier for users to access their data from any device.

 

  • Be it web or mobile. Firebase “Crashlytics” helps you track, prioritize, and fix stability issues which are spoiling your app quality. Often, we need not spend the more time for finding and troubleshooting crashes in real time.

 

  • Firebase Authentication mechanism is aimed to build secure app authentication systems easy by improving the sign-in and on-boarding experience for end users.

 

  • It also provides an end-to-end identity solution, supporting email and password accounts, phone auth, and Google, Twitter, Facebook, and GitHub login, and more.

 

Features Of Firebase In Business

 
1. Google Analytics
2. Cloud Messaging
3. Predictions
4. Dynamic Links
5. Remote Config
6. Invites
7. App Indexing
8. AdMob
9. AdWords
 
FCM (Firebase Cloud Messaging) is a cross-platform messaging solution that will allow you to deliver messages reliably at zero cost. With Firebase, you can send notifications & messages to the users across all the platforms like Android, iOS, and Web and it’s free. These messages will be sent to single devices or also multiple devices.


Setting Up A Firebase Account

 

  • Create a free Firebase account using Gmail

 

  • After logging in to Firebase for the first time, you’ll have a clean Firebase console which is explicitly created for you.

 

create firebase

Create Project In Firebase

 

  • Add the new project by providing project name and country.

add project in firebase
 
 

  • Click on CREATE PROJECT, and that will take you to the firebase dashboard.

firebase dashboard

  • Here you can choose the development platform. After choosing development platform, Firebase will provide the required details of an app like- API Key, authDomain, database URL, including the specific API key which is mapped to the user.

 

Firebase project

Installing Firebase On Your System

 

  • First, install the firebase on your local machine.The Firebase SDK is also available on npm

 

  • Create the project in local machine as shown in below screen shot.

 
Installing Firebase On Your System
 
 
 

  • Install the firebase platform inside the project by running the below mentioned command.

 
[code]
$ npm install firebase –save
[/code]
 
Firebase
 
 
 
install firebase
 
As you can see on the above screen which is done with installing all the required component.
 
Now start running your project on local.
 
run your project on local


Deploying Web Application To Firebase

 
Deploying your web app to the server will require Firebase JavaScript SDK. So you can login and generate the required json using the below command
 
[code]
$ firebase login # Generate a firebase.json (REQUIRED)
[/code]
 
Deploying Web Application To Firebase
 
 
Use the Firebase CLI to run a local server that will look like this,
 
set up hosting
 
 


Firebase Hosting

 
Initiate project on Firebase with the below init command
 
[code]
 
$ firebase init # Generate a firebase.json (REQUIRED)
 
[/code]
 
Once it is initiated then project will start running as you can watch it below,
 
Hosting Web Application in Firebase
 
 
Finally, we have deployed our web application in Firebase, and you can run it on your browser.
 
Below screen demonstrates how we are running our application on the browser
 
 
run application on browser
 
 
Note: We can store Real-time Database up to 1GB and use 5 GB Storage space.
 
 
Want to explore more about technologies? Join us on the excursion of exploring Technologies, Agira Technologies one of the fastest growing Web and Mobile Development Company in India. Handfully, extends its research on Blockchain, Chatbot, Artificial Intelligence, IOT and lot more new technologies. Explore more about us on www.agiratech.com . Let us know your impressions on the comment section.
 
For any inquiries reach us at info@agiratech.com
 

Sankar Raman

A full stack Android app developer having 4 years of experience in Mobile app development. Well amalgamated Co-worker who rapidly commutes in developing, implementing and adopting new technologies to wider possibilities of App development.