GitHub Actions provide a way to automate pretty much anything you want to do with your repository. It can be used to automatically test your project every time you make a pull request or push some code to it, or maybe to publish something to GitHub Packages every time you make a release. The possibilities are endless.

So, in this article, I’m going to walk you through the most obvious functionality of GitHub Actions: deploy your application to production in an automated fashion, so you never have to do it manually again.

What are we going to do exactly?

Keeping in mind that the goal of this tutorial is the deployment, not the application being deployed, we are going to set up a React application using only the template that is already provided when you set up a React app, with a few modifications to make it a little more personal.

Then, we are going to set up a project on Firebase and extract some credentials so we can use the Hosting functionality to eventually — guess what? — host our application and make it available in the internet.

Finally, we will write our workflow file, commit it to GitHub, sit back, and watch the magic of automation happen right before your eyes.

Set up a React app

This section might be unnecessary for the majority of the readers, but I’ll keep it here for those who maybe never dealt with React before and want a glimpse of this beauty. If this is like eating a candy to you, please jump to the next section.

Then buckle up, snap your fingers, and go through the following steps:

1. Make sure you have NPM installed locally (instructions here)
2. Make sure you have NPX installed locally:

npm install -g npx

3. Open a terminal of your choice, select a folder where you want your project to live, decide on a name for your project (I’ll use awesome-app for this tutorial), and use NPX to build your application’s template:

npx create-react-app awesome-app

4. Go grab some coffee while everything is being set up, then return to your desk, move into the recently created awesome-app folder and start the application with the following commands:

cd awesome-app
npm start

Wait for it and… Awesome! You now are the proud owner of a website! Right there running in your browser with the animated React logo and all. This is sufficient for the purposes of our demo, but go ahead and edit src/App.js to something more personal, if you so desire. Being a cat person, mine looks like this

#firebase #automation #react #deployment #github-actions