Host Your Own React Site with Firebase and Github Actions

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

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

Deploy React Application To Firebase Using GitHub Actions

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

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

How to Create Protected Routes in a React app with Firebase and react-router

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

Fetch Data from the Github API with JavaScript/React

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.