Android

Firebase Hosting For Your App Website

A website for your mobile application is very important because it serves as an entry point for your online visitors to the app. It gives the first impression about the app to a visitor and from there a visitor is directed to the appropriate places like app store (Google Play Store or iTunes) or web view, demonstration, enquiry, support, about the app/developer, terms and conditions, privacy policies etc.

As your application evolves and app spreads across multiple platforms and online medias, your next job will be on organising them under an umbrella. The answer to all of the above mentioned requirements is a website.

  1. App’s Front Page In Internet
  2. Attract People To Your App
  3. Gives First Impression Of The App
  4. Gives High Conversion Rate
  5. Lay Stone In Building Long Lasting Relationship Between Users And the App
  6. Website Can Share some of the App’s Functionalities
  7. Less Expensive Compare to App Development
  8. High ROI

Choosing a hosting service and configuring, maintaining and deploying processes are complex. Here Firebase simplifies everything and organize under firebase project console for an app developer because hosting is not the mainstream work of an app developer and it always steals productive hours.

Firebase hosting actually uses Google Cloud Platform for providing Firebase’s hosting feature.

Common Use Case

What would you do if you want to share your app install link to public? You cannot share a Google Play Store install link to a person having iPhone right? So it is always good to share website link instead because an app website can give options to a visitor.

We cannot assume that, not all visitors are coming to find install link of the app. Visitors need some good impression that can motivate them to install the app. Some need a feature by feature explanation, some others need to see demo video.

A website is perfectly fit for all the requirements and it helps apps to grow in many way. It plays an important role in building a good relationship between a user and app.

Domain Name

Domain name is the name of your website. All app websites are recommended to use their business name as the domain name. Few examples are given in the below section.

You can check the availability of the domain here,

https://domains.google.com/registrar

If your desired domain name is showing as available then, you can purchase it. It will give you a control panel of your domain name where you can find DNS manager.

There are many domain registrars available, you can choose any of them.

.app Top Level Domain

.app is the recommended top level domain for the app websites. Following are the main advantages you get if you choose .app domain,

  1. Built-in Web Security
  2. Memorable Domain
  3. Easy To Find Out The App
  4. Better User Engagement

Who is on .app domain?

  • https://cash.app
  • https://www.puppr.app
  • https://bear.app

above is a very short list. Since its introduction 2015, it is being widely used for branding mobile, web applications.

For more: https://get.app/

Host Website In Firebase

Open Firebase console and click on hosting menu on left

or go to the following link,

The above page indicates that you have not hosted any websites in firebase hosting for the selected firebase project.

Click on “Get started” to host first website in firebase hosting.

Next page will give following instructions to setup firebase hosting,

Step 1. Install Firebase CLI

To install Firebase CLI tool, please run the following command in development computer’s terminal

 

npm install -g firebase-tools

 

If you are getting error like, npm command not found, then you have to install node js

Step 2. Sign In To Google Firebase

 

firebase login

 

After running the above command, create a folder for your website and go to the created folder and run the following command to initiate the firebase project.

 

firebase init

 

The above command will make the folder as the root folder for your firebase project.

List All Your Firebase Projects

Run the following firebase command to list down all your firebase projects as table format under your logged in Google account. You can find the Project Id by looking at the column header.

firebase projects:list

Above screen shot is the result of firebase projects:list command. The selected project will be highlighted with a different color. If you are seeing different selected project then you have to change the selection.

Change Firebase Project

Change the selected firebase project if it is selected wrong project. The following command will change the firebase project selection.

firebase use <PROJECT-ID>

Above command will change the selection of the project and all the following firebase commands will executed on selected project.

Create a sample html file as the landing page of your website.

Create index.html file inside the folder and copy the following sample content.

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>DevDeeds Demo App - Home Page </title>
</head>
<body>

<h1>DevDeeds Demo App - Home Page </h1>
<p>This is the demo website created to show firebase hosting. You can change the content by modifying index.html file</p>

</body>
</html>

 

Step 4. Deploy the files to Firebase Hosting

Once project files are ready to deploy, Please run the below firebase command to deploy all the files.

firebase deploy

Once deployment is completed, you can see the deployment under the release history section on the same firebase hosting page.

The above command will start uploading all the files to your firebase project’s hosting. This command deploys your Hosting content and config to the following Firebase-provisioned subdomains urls:

  • PROJECT_ID.web.app
  • PROJECT_ID.firebaseapp.com

In my demo project, the url will be like, https://devdeeds-auth.web.app/

About author

Rojer is a programmer by profession, but he likes to research new things and is also interested in writing. Devdeeds is his blog, where he writes all the blog posts related to technology, gadgets, mobile apps, games, and related content.

Leave a Reply

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