Automate Firebase Deployments for Web Builds with Appflow

By admin

Copied
ORG

This is a guest post by

Tim Wills
PERSON

, CTO at

Uckers.com
ORG

. Connect with

Tim
PERSON

at

@TimW_Tech
ORG

.

Are you building an app that deploys to both mobile and web from the same codebase? Do you want to automate your CI/CD process? If so,

Ionic
ORG

’s mobile CI/CD platform

Appflow
PRODUCT

with

Firebase
ORG

can provide all you need to automate front and back end deployments.

Why Appflow? If, like me, you want to simplify your CI/CD workflow and are deploying the same code to web and mobile, environments can become messy. Appflow allows you to set up

one
CARDINAL

single source of truth for your environments.

Sure, we could set up a GitHub Action to deploy to

Firebase
ORG

hosting, but then you’ve got to manage another set of environments for that web build. Added to that, if you have separate environments for the back end, you can greatly simplify things by using

Firebase Functions
ORG

and deploying those from

Appflow
PRODUCT

too (other steps required after this walkthrough).

Appflow is primarily for mobile app deployments, but the

Appflow
LOC

documentation for mobile deployments is easy to follow if you get stuck. Automatic deployment to

Firebase
ORG

requires a bit more work, so I’ll cover this in detail.

Here’s what we’ll do:

Start an

Ionic
ORG

template app using Git for source control


Connect
ORG

it to a

Firebase
ORG

back end

Run web builds from the

Appflow
PRODUCT

dashboard

Create a post-deploy script to deploy to

Firebase Hosting
ORG

on completion of each web build in

Appflow

Getting Started

Open a Terminal
PRODUCT

window:

npm install -g @ionic/cli ionic start

Press Y to use

the App Creation Wizard
LAW

and start a “menu” template app using your preferred framework (I used React). Give it a name like “

My Great App
WORK_OF_ART

”. You’ll be directed to create an account which you need to do to use

Appflow
PRODUCT

— we will come back to this later.

Go back to your terminal window, change to your new app directory and serve the app:

cd my-great-app ionic serve

Congrats, you just created an email app

Let’s get this app checked into source control.

Go to your Git provider account (I used GitHub) and create a new repo called “my-great-app”. Don’t add a readme or license, as we’re going to overwrite it with the code below. Go to your app’s directory in

Terminal
ORG

and set up your new repo as the remote:

git init touch README.md git add README.md git commit -m "

first
ORDINAL

commit" git remote add origin https://github.com/[GIT_USERNAME]/my-great-app.git git push -u -f origin main

Be careful with the -f (force) flag, I’ve just used it to help get set up quickly here.

Setting up Firebase

Next we need to install

Firebase
ORG

and deploy to hosting from a local machine. Go to the Firebase Console and create a new project called “

My Great App
WORK_OF_ART

”. Choose whether or not to enable analytics and create the project.


Firebase
ORG

project

Home Screen

ORG

Create a web app by clicking on the “</>” icon. Give your app a nickname, check the “Also set up

Firebase Hosting
ORG

” box, and register the app. Follow the instructions to add

the Firebase SDK
PRODUCT

and install the CLI.

Next, login and initialize

Firebase
ORG

in the root directory of your app:

firebase login firebase init

Set up Firebase Hosting

The firebase init command takes you through the options, so use the spacebar to select

Firebase Hosting
ORG

only. You can set up anything else later by running firebase init again. Select the

Firebase
ORG

project that you created just now (my-great-app).

The next step is important– you’ll need to provide the public directory of the web build folder. The current version of the ionic template app uses dist so be sure to type that in correctly.

Answer “y” to configure as a single page app but select “n” for automatic deployments with GitHub to complete setup. Now you have an app that can be deployed to

Firebase Hosting
ORG

. However, we’ve not actually built the

Ionic
ORG

app.

Go back to your root directory and type:

ionic build

Now you’ve built the app we can deploy it:

firebase deploy –only hosting

The terminal will then show the live web address of your site and also the

Firebase
ORG

hosting console page.

Enter Appflow

We’ve now got the web app up and running and could automate CI/CD with

GitHub Actions
ORG

if we want, so what’s the point in using

Appflow
PRODUCT

? Let’s imagine this app is much more involved, with iOS and

Android
ORG

deployment targets and multiple environments.

Just running a deploy from GitHub actions or a local machine will require duplication of all sorts of information. Ideally, we want

one
CARDINAL

platform to define how the build is made and then send it to multiple targets. Fortunately, we can do this with

Appflow
PRODUCT

.

We made an

Appflow
ORG

account earlier so let’s go back to

the Appflow Dashboard
FAC

. From the Apps screen, click on the “New app” button in the upper right and then “Import app.” On the next screen, choose

Capacitor
PRODUCT

as the framework (all

Ionic
ORG

apps use

Capacitor
PRODUCT

, even if we aren’t using

Capacitor
PRODUCT

specifically in this walkthrough).


Connect
ORG

your GitHub account and link

Appflow
PRODUCT

with the repository you created above. Once your repo is connected, create a build from the commit we made above (“

first
ORDINAL

commit”).

Creating your

first
ORDINAL

web build with

Appflow

Choose ‘Web’
PRODUCT

, use the latest build stack, but leave the web preview and live update options unselected. Go ahead and build the web app.

This will create the web app on the

Appflow
ORG

servers, however it is not deployed anywhere yet. You can download the .zip from the build page if you want to, or read on for how to deploy from

Appflow
ORG

to Firebase.

Setting up Firebase Deployments

Well done for getting this far! Let’s look at some code.

Open the app in your preferred IDE. Create a new file in the root directory called web-deploy.sh .

Paste in the following code:

#!/usr/bin/env bash echo "

Deploying to Firebase Hosting
WORK_OF_ART

…" firebase deploy –only hosting

This is customizable. You can, if you wish, use any of the

Firebase
ORG

CLI tools but would need additional configuration for functionality beyond hosting alone.

We also need

the Firebase Tools
ORG

in the package.json file to make them available on the

Appflow
PRODUCT

server.

Go back to the a terminal window in the app root directory and install the tools:

npm install firebase-tools

Now we need to ensure the web-deploy.sh script we just created is executed in

Appflow
ORG

once your app has finished building.

We need to add

two
CARDINAL

scripts to the package.json file:

A post-build script to deploy to

Firebase
PRODUCT

A pre-build script to get the credentials for a service worker account and make them available to the post build script

Add the following to the scripts: section:

"prebuild": "if [

\"$CI_PLATFORM\
WORK_OF_ART

" = \"web\" ]; then node

./gen
ORG

-firebase-key-json.js; fi", "postbuild": "if [

\"$CI_PLATFORM\
WORK_OF_ART

" = \"web\" ]; then

chmod +x ./web-deploy.sh
PERSON


&& ./web
ORG

-deploy.sh; fi"

$

CI_PLATFORM
MONEY

is an environment variable passed by

Appflow
ORG

so we can check that we are only deploying on a web build and not a native mobile app build. We also need to alter the permissions to execute the web-deploy script.

Create the other file mentioned in the root of the project called gen-firebase-key-json.js . This will contain your JSON key from the

Google
ORG

Cloud service account giving you access to deploy to hosting.

Setting the Google Cloud Credentials

For security, we don’t want to put private keys in our repo and check them in to source control. Instead, we’re going to create a private key, add it to Appflow secrets, and then bring it into the gen-firebase-key-json.js file through an environment variable.

We can’t bring environment variables directly into a JSON file, so we need this file to be a JavaScript file that generates the JSON file with the correct key when it is run from the pre-build script. Still with me? Ok, let’s create the credentials needed.

Go back to the

Firebase
ORG

console project settings at the top left and click the service accounts tab. Follow the “Manage service account permissions” link on the right.

Service account settings for

Firebase
ORG

This will take you to the relevant

Google Cloud
PRODUCT

project. We now need to create a service account following these instructions. Click “Create service account” at the top of the

Google
ORG

Cloud page you just opened. Add the details shown below (the ID is auto-generated) and click Create and continue.

Create a service account

Next we need to add

the Firebase Hosting Admin
LAW

role to the account. Search for it in the role box and make sure it is exactly that wording (it is different to the

Google
ORG

instructions). Click continue and then done.

Now, click the

3
CARDINAL

dots at

the end of the row
DATE

of your newly created service account (appflow-web-deployer) and click manage keys. Add a key, (select create new key) and choose the JSON option. It will be downloaded for you.

This key allows access to deploy to your

Firebase
ORG

hosting site, so keep it safe or ideally destroy it once it has been uploaded to

Appflow
PRODUCT

.

Your key will look like this:

{ "type": "

service_account
WORK_OF_ART

", "project_id": "my-great-app-bdb14", "private_key_id": "[YOUR_PRIVATE_KEY_ID]", "private_key": "[YOUR_PRIVATE_KEY]", "client_email": "[

YOUR_ACCOUNT
WORK_OF_ART

]", "client_id": "[YOUR_CLIENT_ID]", "auth_uri": "

https://accounts.google.com/o/oauth2/auth
ORG

", "token_uri": "https://oauth2.googleapis.com/token", "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", "client_x509_cert_url": "

https://www.googleapis.com/robot/v1/metadata/x509/[YOUR_ACCOUNT
PERSON

]", "universe_domain": "googleapis.com" }


Adding Credentials to Appflow

First we need
WORK_OF_ART

to take the private key alone and add that as an

Appflow
LOC

secret. Start by creating an environment in

Appflow
LOC

.

Go to

the Appflow Dashboard > Environments >
ORG

New environment. Name your environment “

Dev
PERSON

environment” and add the following:

To Secrets: Key: FIREBASE_PRIVATE_KEY Value: everything between the quotation marks from the “private_key” field in the JSON file created in the last step

To Variables: Key: GOOGLE_APPLICATION_CREDENTIALS Value: ./firebase-

key.json

Create
ORG

a new environment in Appflow

You can set this environment up how you wish with variables for deploying to other platforms, for example. This is why it is so useful to deploy to

Firebase
ORG

from here – you can have

one
CARDINAL

single source of truth for the environment your builds are built in regardless of platform. Go ahead and create the environment.

The final step (we’re nearly there!) is to create the

JavaScript
LAW

file that will generate the firebase-key.json in the pre-build phase. All you need to do is go back to the JSON key you downloaded, turn it into a .js format (no quotes for field names), remove the actual private key and replace it with the environment variable (secret) we just created.

The last line (and the import) saves the file so it will be present at the

GOOGLE_APPLICATION_CREDENTIALS
PERSON

path when the post-build script runs. You should end up with a file looking like this:

import fs from ‘fs’; const credentials = { type: "

service_account
WORK_OF_ART

", project_id: "[YOUR_PROJECT_ID]", private_key_id: "[YOUR_PRIVATE_KEY_ID]", private_key: process.env.

FIREBASE_PRIVATE_KEY?.replace(/\

/g
ORG

, ‘

‘), client_email: "[

YOUR_ACCOUNT
WORK_OF_ART

]", client_id: "[YOUR_CLIENT_ID]", auth_uri: "

https://accounts.google.com/o/oauth2/auth
ORG

", token_uri: "https://oauth2.googleapis.com/token", auth_provider_x509_cert_url: "https://www.googleapis.com/oauth2/v1/certs", client_x509_cert_url: "

https://www.googleapis.com/robot/v1/metadata/x509/[YOUR_ACCOUNT
PERSON

]", universe_domain: "googleapis.com" } fs.writeFileSync(‘./firebase-key.json’, JSON.stringify(credentials, null,

2
CARDINAL

));

Save it to your project root as gen-firebase-key-json.js .

Now we need to commit the changes but before we do, just make sure we’re not committing pointless files. Alter the .gitignore file and add /dist on a new line. You should now have just some changes from

Firebase
ORG

and the files you added earlier waiting for a commit.

Add a commit message like “automated firebase hosting deploy”, commit and push to the remote.

Deploying the Web Build

Go back to

the Appflow Dashboard
FAC

to the

Commits
ORG

screen and you should now see your commit at the top of the list. Click start build, select Web and this time, make sure you select

the “Dev Environment
ORG

” you just created under the Environment option.

As the build progresses, you should see the pre-build script run immediately following npm run build in the build log. After the build completes, you will then see the rather verbose logging of

Firebase Hosting
ORG

doing its thing and then hopefully a successful job. There may be a couple of errors regarding not having iOS and

Android
ORG

targets but that’s ok, we don’t need them for now.

Once the job completes, verify that the update has actually taken place by going back to the

Firebase
ORG

console and selecting Hosting from the left-hand side. You should see the most recent release was uploaded by your service account just now. Congrats for your

first
ORDINAL

successful deployment!

Where to Go from Here

Now that you’ve set up hosting, if you’re using other

Firebase
ORG

services like Firestore and Functions, you can deploy to these as well using your web-deploy.sh script. This means

Functions
ORG

can have access to all your

Appflow
PRODUCT

environments, greatly simplifying cross platform CI/CD.

Not using

Appflow
PRODUCT

for web and native mobile builds yet? Get started with a free account

today
DATE

!