Securely deploy your progressive web app with Firebase and CircleCI
So you’ve taken quite some time to build your Progressive Web App (PWA) and it is now time to deploy it. Where to start?! I am going to share the simplest method I have come across to get this done. The key platforms that we shall use for this specific process are Firebase and CircleCI. Okay, let’s get started.
First, you need to sign up for Firebase. Once that is done, create a project on under the
Hosting tab. I created one called
ray-besiga. A modal will then popup with instructions to install the Firebase Tools on your command line.
Follow that up by navigating to the directory where your PWA is and run the following commands:
The first command signs you into the Google Firebase console, and the second one initiates your project. On your terminal, you should have the following output (comes with lots of fire emojis!!)
Scroll down to hosting and select it by pressing the
space bar and then enter to confirm your choices. It then takes you to the project setup.
Next comes the
Hosting Setup page. I went with the default setup below but we shall have to make changes for a number of reasons.
I am building my PWA using Jekyll as my static site generator. By default, Jekyll builds to
Firebase expects to deploy to the
public folder. We shall make changes to this in the
firebase.json file, which is created along with the
.firebaserc file when we run the
firebase init command. Edit the
firebase.json file to look like this:
With that, we are ready to deploy our site. Firebase provides the following command for us to make it happen.
You should now be able to navigate to the URL shown in the terminal in your browser to see your newly deployed website. Thanks Firebase! However, I’m sure you also realize that the deployment is manual. A cooler way to do it is with the
commit-to-deploy as done by Github. We are going to do this with CircleCI.
Head on over to CircleCI , login with your Bitbucket or Github and add the project you wish to continuously deploy. At this point, you can create a
circle.yml file or you can have one created for you. I prefer to make mine as CircleCI uses inference if you decide to build without making one. Mine is pretty basic and looks something like this:
Commit this file, push upstream to your remote, click build, and voila!
Oh wait, we’re not there yet. Looks like we are missing the token specified in the last line of the
circle.yml file. This token is essential as it grants access to the
firebase tool on the CI server. To fix this issue, we shall run the following command:
Once access if granted, you should a token similar to this in your terminal
Copy that token, head on over to CircleCI, under ‘Build Settings’ in the ‘Project Settings’, click the ‘Environment Variables’ link and click the ‘Add Variable’ button. Make sure the name of the variable is
FIREBASE_TOKEN, the value being the token.
Now commit any changes you may have made in the repo, and watch the build. Success! Happy dance. Hope you enjoyed following along. Next time, we shall try a similar process with SemaphoreCI and Firebase.