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.