Host Your Own React Site with Firebase and Github Actions

Host Your Own React Site with Firebase and Github Actions. Today I will show you how to host your website on firebase, and integrate it with Github Actions CI/CD. As part of learning UI/UX design, I decided to redesign my website and work on it. Once I was done with the design and development.

As part of learning UI/UX design, I decided to redesign my website and work on it. Once I was done with the design and development, I was wondering if there was an easier way for me to deploy than the current method of merging code into master, and then manually typing the Firebase CLI command to deploy it.

Today I will show you how to host your website on Firebase, and integrate it with Github Actions CI/CD, so you can seamlessly deploy code to your site.

Let’s begin

I will show the steps assuming that you have your code hosted in GitHub, and are using Firebase deploy for your site. However, the steps might be similar for other vendors as well.

Setting up the code

For the purpose of this article, I created a  new repo on GitHub. I set up some boilerplate code using create react app. Since the actual UI code is not in the scope of this article, I just made a simple page. Here’s a screenshot of the page.

Custom logo in the default App.js page

Now, I commit the current state of code, and merge it to master. Next, we integrate Firebase.

react firebase github javascript

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

In this video we'll set up a GitHub Actions CI pipeline that will deploy our React application to Firebase Hosting

React.js Redux Github API Username Search With Repositories Data Using React Router in Javascript

Using Firebase and react-router to create protected routes in a react app.

In this tutorial, I will create a React app using the Github API to fetch data. I'll be using React hooks and Semantic UI for the styling.