GitHub Actions: Build and deploy your web app within minutes using CI/CD and Firebase
Recently, GitHub launched GitHub Actions Beta. With GitHub Actions, you not only can manage your repositories but also build and test your code directly on GitHub. You don’t have to use webhooks and switch to other build services anymore. Finally, we get everything under one roof! 😊
In this post, I’m going to show you how to build your React App using GitHub Actions. Later, we’re using the service to deploy our artifact to Google’s Firebase Hosting. Every time somebody pushes changes to our master branch on GitHub, our CD/CI pipeline will be triggered.
Disclaimer: GitHub Actions is free for now (beta). GitHub might charge for their service once it’s being released. Note that GitHub Actions are still subject to changes. If you find any outdated examples, please drop me a message!
1. Register for GitHub Actions Beta
If you haven’t done already, sign up for a free GitHub account. Then, register for the GitHub Actions beta program.
GitHub uses hosted virtual machines to run workflows. The virtual machine contains an environment of tools, packages, and settings available for GitHub Actions to use. (github.com)
📌 For being able to follow the next steps, make sure you’ve created a GitHub repository with a working, checked-in React App. Check this out: How to create a new React App.
2. Set up your project in Firebase Console
Use your Google account for signing up at Firebase.
They offer a variety of backend services (authentification, machine learning, etc.). However, we’re only going to use their hosting service, Firebase Hosting. I encourage you to take a more in-depth look at their products. In my opinion, Firebase offers the most convenient solutions for creating prototypes and small web apps at a very high pace. 🚀
After registration, create a new Firebase project. Now, select it and go to Project Overview → Hosting → Get started.
Now, you have to follow the displayed instructions. You will need to download the NPM package firebase-tools. Use it to initialize your Firebase project in your app’s root. You will also have to log in once using Firebase Tools to connect your app with Firebase.
Once you’ve completed the wizard, build your project on your local machine:
npm run build
The React build tools will save your artifact in /build. Since Firebase expects it to be in /public, we have to manually change public to build in firebase.json:
Now, let’s test our setup:
Hopefully, you receive a success message stating the URL of your hosted application. Follow the link and check, if your build is available.
If everything works, you’re ready to set up your GitHub Action. This workflow will checkout your master branch, and build and deploy your artifact (/build) to Firebase Hosting.
Since we don’t want to log in manually every time our pipeline is triggered, we’re going to provide GitHub Actions with a permanent key 🔑 to access Firebase Services.
Store your key and use it in the next step.
3. Create your GitHub Action
Finally, we’re going to create our first GitHub Action!
📌 Make sure you’ve pushed all changes from the previous step to your GitHub repo. Now, enter your repository and click on the new Actions tab:
Now, click on Set up a workflow yourself and paste the following configuration:
💡 We’re using Ubuntu as our build server. Once there’s a push on master, the branch gets checked out. Now, the script installs all dependencies and runs the build using NPM (defined in package.json). Finally, the artifact is deployed to Firebase Hosting using Lowply’s deploy-firebase GitHub Action Template.
You might have noticed the two environment variables at the very bottom of the configuration. Make sure you replace FIREBASE_PROJECT with your project's unique name(have a 👀 at the Firebase Console).
Since we don’t want to store the Firebase secret 🔑 in our workflow configuration, we have to add a secret to our GitHub repo. Just follow the official instructions and use FIREBASE for the secret’s name:
4. Test your workflow
We’re done! 😊 Finally, test your pipeline by pushing new changes to master.
Now, go to Actions and click on Build and Deploy to Firebase and watch your build progressing. Once every step has a green checkmark, go to your Firebase project URL and check 👀 for changes.
With this post, I wanted to show you how easy setting up a working build and deployment pipeline can be using GitHub Actions. 🚀
Feel free to adapt this tutorial to your use case. Check out the numerous user-generated GitHub Action Templates for other scenarios and programming languages!
What do you think about GitHub Actions? Let me know in the comment section. 🔻