Home » Blog » Using Firebase Hosting with Devlopr

Using Firebase Hosting with Devlopr

  1. Setting up Netlify CMS with Github-Pages Hosted Jekyll Site:
  2. Using Firebase Hosting with Devlopr

Hey ! We have added Firebase Hosting support for Devlopr !

If you don’t know about devlopr ?

What’s new ?

Earlier we had to use our repo name same as our github username eg. sujaykundu777.github.io for Github Pages. But what if, you don’t want to use username and ditch Pages and Switch to Firebase Hosting ?

Yayy ! Now you can use any repo name of your choice for using devlopr in that case, and devlopr will auto deploy site changes to your Firebase Hosting with few settings 🙂

Hosting devlopr with Firebase

1 . Fork https://github.com/sujaykundu777/devlopr-jekyll with any project name of your choice using your Github Account or use template button.

2. Setting up Firebase

First step, you need to create a project on the Firebase Console to host your site. You can call it whatever you want. Once created, you have your hosting project set-up. Easy eh?

To actually start pushing files to the hosting, you need to use the Firebase CLI tool. Before you can use that though, a bit of machine setup is necessary.

The Firebase CLI tool requires Node to be installed (instructions here https://nodejs.org/en/download/package-manager/ ). Once Node is installed, you can install the Firebase CLI tools by running

$ npm install -g firebase-tools

Once that is done you need to give the tool access to your account, by running firebase login in your terminal, and following the steps through to completion.

Login and test the Firebase CLI

After installing the CLI, you must authenticate. Then you can confirm authentication by listing your Firebase projects.

  1. Log into Firebase using your Google account by running the following command:
$ firebase login:ci

This command connects your local machine to Firebase and grants you access to your Firebase projects.

  1. Copy the Firebase Token to use later, it should look something like this
1//0ga8VCtsm2OL-aCgYIARAAGBASNwF-L9IrcpiXPHCJSusWERRaMTg1hswX0IsG5qo74ezSJx0rccnuZuSH3jXRFkvP2U4YW2yrRh

The displayed list should be the same as the Firebase projects listed in the Firebase console.

Now, we also need to know our project’s “Project Id”

run the command below to display all your firebase projects :

$ firebase projects:list --token "REPLACE_WITH_YOUR_ACCESS_TOKEN"

It will display a table with all the projects and also you can find the respective project’s
Project ID

for example “my-devlopr-blog-132”

Great ! We now need to add two environment variables in our Github Repository Secrets

FIREBASE_TOKEN
FIREBASE_PROJECT_ID

with our token and project_id as its values. Go To your Github Repo > Settings > Secrets

New Repository Secret. Add this two variables with its values. – FIREBASE_TOKEN, FIREBASE_PROJECT_ID

Updating Deployment Strategy

Since devlopr can have multiple deployment strategies, you can switch to “Deploy to Firebase” easily.

Go to your code. There will be a DEPLOY_STRATEGY file :

By default, it should have “none” , Replace this with “firebase”. This is important, since it tells our CI to choose firebase as our primary Deployment Strategy.

In DEPLOY_STRATEGY file:

firebase

That’s it commit your changes and push. Your site will be deployed to your Firebase Hosting.

Your site be up and running. you can visit your site at your_project_name.web.app or your_project_name.firebaseapp.com

Demo – Checkout https://devlopr.web.app , devlopr is auto deployed using Firebase !

Happy Hacking ! 🙂