Skip to content

085

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

085

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

How to Deploy React App on Firebase Hosting? (CI/CD with GitHub Actions | Preview | Custom Domain)

YouTube Tutorial

Prerequisites

  • Firebase Account
  • npm 5.2+

Create React App from Scratch 2021

  • Check npm version
npm --version
  • Create a new single-page application in React
npx create-react-app react-demo-085
  • Change directory to the app
cd react-demo-085
  • Inspect the folder content
code .
  • Run react locally
npm start

Create Firebase Project

  • Go to Firebase

  • Click Go to console

  • Click Create a project

  • Create react-demo-085 Firebase project

Deploy React App on Firebase Hosting

  • Install the Firebase CLI
npm install -g firebase-tools
  • Log in and test the Firebase CLI
firebase login
  • Test that the CLI is properly installed and accessing your account by listing your Firebase projects.
firebase projects:list
  • Build for React application
npm run build
  • Initialize your project
firebase init hosting
  • Deploy to your site
firebase deploy --only hosting

  • Open hosting URL

  • Check TLS certificate

Firebase Hosting Add Custom Domain

  • Go to Firebase console

  • Navigate to Hosting

  • Click Add custom domain

  • Enter your domain, in my case devopsbyexample.io

  • Create A record for your domain

  • Optionally add www subdomain

Set up automatic builds and deploys with GitHub

  • Create GitHub repo react-demo-085, let's make it private

  • Add existing repository

git remote add origin git@github.com:antonputra/react-demo-085.git
git add .
git commit - 'init commit'
git push origin main
  • Reinitialize Firebase hosting
firebase init hosting
  • Create new branch for new feature
git checkout -b feature-x

  • Modify src/App.js

  • Commit, push and create PR

git add .
git commit -m 'Add new feature X'
git push origin feature-x
  • Go to Actions in GitHub repo

Links

Clean Up

  • Remove react-demo-085 firebase project

  • Remove firebase-tools

npm uninstall -g firebase-tools

  • Remove react-demo-085 GitHub repo

  • Remove DNS records

  • Log out from Firebase

firebase logout