Google Firebase is nice, but better with a dash of Azure DevOps.

Published Reading time

The Google Firebase platform has many features such as Cloud Firestore (app data storage), Cloud Functions, Authentication, Realtime Database and of course, web hosting. Whether you deal with Single Page Applications (SPA) e.g. Angular, ReactJs, EmberJs, Backbone, etc. or use html generation that use Liquid and/or Markdown flavors such as Jekyll, DocFx, etc. having an easy, robust hosting solution is a must to bring your good work to the world. As someone who has logged many miles on the Azure platform, I wanted to give Google Firebase a try.

In this post, we will take a base DocFx template from Github and setup and deploy the template to a new Google Firebase hosting project. As stated above, Google Firebase has many other options that we are just going to ignore in this post and just focus on generating some artifacts (html, css, images, etc.) and publish to our new Firebase hosting project. Finally, since Azure Pipelines has a free tier; why not setup a CI/CD deployment? Of course we should! Let's get started.

Create a Google Firebase Project

Go to https://console.firebase.google.com/ , login with a Google Account.
Add project, give it a name. Ours will be docFxSample

It is not necessary to add Google Analytics for this sample, but you might for a production app.

Your project is now created in the 'Spark Plan' that is free. More on Firebase pricing here.

Development Environment

Install Firebase Tools

Let's take a look at the npm based install for the CLI. This Firebase CLI will be necessary to initialize and deploy your html files to the hosting service.


npm install -g firebase-tools

Clone DocFx Sample App

We will use a demo .NET application to generate some html using the DocFx default template. When this project is built, it will emit a static website to the wwwroot folder that we want to publish. To follow along, clone the master branch for https://github.com/dlmelendez/docFxWebAppRefresh.git .

Note

There is a firebase-demo branch that has already been intialized for the demo for reference. However, it is initiliazed to the project setup for this demo and you should follow the steps below to initialize your clone of the master branch to setup the your own project hosting correctly.

This project was optimized to work with Visual Studio while debugging, but you can just as easily build it from the dotnet command line all the same.

Open the /sample/ElCamino.DocFx.WebAppRefresh.Sample/ElCamino.DocFx.WebAppRefresh.Sample.sln in Visual Studio and build. or use the .NET SDK command line


dotnet build ElCamino.DocFx.WebAppRefresh.Sample.sln

Important

This code sample, once built, will output all of the generated html built from the default DocFx template into the wwwroot folder of the sample C# web app project. Deploying the whole web application project is not necessary and you only need the post build contents of the wwwroot folder to publish. Check out the README.md at https://github.com/dlmelendez/docFxWebAppRefresh for more information on the project we are using.

Initialize Firebase Hosting

Change directory to your sample app


cd docFxWebAppRefresh/sample/ElCamino.DocFx.WebAppRefresh.Sample/


firebase login

You will be directed to a permissions page for the Firebase CLI in your browser.

Intialize the Firebase hooks

This step creates two files in your root application folder 1.) .firebaserc that has the Firebase Hosting project link and 2.) firebase.json contains what folder you want to make public and files to ignore. public is the default folder that is selected and we need to change that to wwwroot just so it matches nicely with our demo project.


firebase init

Yes to process
Select only the Hosting option
Existing project, docFxSample
Change the public folder name to wwwroot
Answer No to Configure as a single-page app
Html files created
- wwwroot/404.html - you can keep this file or add a 404.md markdown file
- wwwroot/index.html - don't bother overwriting, will be regenerated on build
Firebase initialization files created

Publish the sample app

Time for the moment of truth, let's publish this sample site to the cloud!

Change directory to your sample app


cd docFxWebAppRefresh/sample/ElCamino.DocFx.WebAppRefresh.Sample/

Build the web application

Open the /sample/ElCamino.DocFx.WebAppRefresh.Sample/ElCamino.DocFx.WebAppRefresh.Sample.sln in Visual Studio and build. or use the .NET SDK command line


dotnet build ElCamino.DocFx.WebAppRefresh.Sample.sln

Publish to Firebase Hosting.


firebase deploy

Sample DocFx Website

This is the sample website running on Firebase hosting.

Firebase Deployments

This Firebase console shows all of your deployments for this project, including our most recent.

Azure Pipelines CI/CD

Alright, that was a great getting the sample website up and going. Let's go a step further and rub a little DevOps on this process to make it all that much better! After all, "friends don't let friends right click, deploy" - Donovan Brown.

Here is the introduction to Azure Pipelines if you are not familiar. Setting a up a new pipeline is essentially an automated build and/or deployment process. In this demo, we will build and deploy our sample application from Azure Pipelines since we can integrate with both Github, build a .NET project, install npm and Firebase tools, and execute a Firebase deployment.

Firebase Deployment Token

As you may be thinking, it will be difficult from a CI perspective if we need to do a firebase login to deploy. We will need to retrieve login token first and then store it securely in the build pipline.


firebase login:ci

Make sure you complete the browser windows oath permission acceptance. Then, copy the token from the command window (red box), you will need it for a later step.

Create the Azure Pipeline

Let's start by signing in to Azure DevOps > Pipelines > New Pipline

Connect to Github

Authorize your repository

Edit the YAML

Skip through the Configure section selecting anything you want, we will correct it all in the Review step. For fun, we are adding the build number to the Firebase deployment. After a successfully deployment, we will now see the build number in the Firebase deployment console.

Automating all of the steps in the previous section to bring your DevOps status to an 11.

Secure the Firebase Token

Add BuildConfiguration variable

Save and Run the Azure Pipeline

Checking the Firebase deployment for the build number

As you can see in the deployment console, the build number 20191127.2 is associated with the latest deployment.

Summary

We crossed the streams and covered alot of ground.

Google Firebase Hosting
DocFx - document/html generation platform
.NET Build
Node and npm commands
Azure DevOps Piplines

We took the html being built from a .NET app and published to a Google hosting service. Then, we went next level and sprinkled some DevOps goodness on the sample to fully automate a deployment on check in and record the build number. Now that is a full day, hope you enjoyed the article!

the cloud way