Deploy your React app seamlessly to GitHub Pages using GitHub Actions. With this setup, every push to your repository's main branch triggers an automated workflow that builds your app and publishes it to GitHub Pages. This ensures your latest updates are always live, without manual intervention. By leveraging gh-pages and a simple YAML configuration, you can maintain a smooth and efficient deployment pipeline directly from your GitHub repository.
Creating an app
Create react app if you don't have one by typing this command.
npx create-react-app my-app --template typescript
cd myapp
Add gh-pages library
gh-pages library is a simple tool for publishing files to a gh-pages branch on GitHub, which GitHub Pages uses to serve static websites.
npm install gh-pages --save-dev
Add home page in package.json
Specifying homepage tells React where the app will be hosted. It helps in generating the correct URLs for assets in the built files, ensuring everything works correctly when the app is deployed to GitHub Pages.
"homepage": "https://{github_username}.github.io/{repo_name}",
{
"name": "myapp,
"version": "0.1.0",
"private": true,
"homepage": "https://{github_username}.github.io/{repo_name}",
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.101",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^6.1.1",
"tailwindcss": "^3.4.4"
}
}
Deploying to GitHub Pages
Changing GitHub Repository Settings
- Create
publicrepository in order to deploy toGitHub Pages. - Push your code to the
GitHub.
git add -A
git commit -m "init proj"
git remote add origin https://github.com/USERNAME/REPOSITORY_NAME.git
git push -u origin master
- Allowing read and write permissions in settings -> Actions -> General. This is to allow write access to gh-pages Branch.
- Create workflow yml file under
.github/workflows/action.yml
# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
name: Deploy App to GitHub Pages
on:
push:
branches: ["main"]
pull_request:
branches: ["main"]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- run: npm ci
- run: npm run build --if-present
- run: npm test
- name: Deploy with gh-pages
run: |
git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
npx gh-pages -d build -u "github-actions-bot <support+actions@github.com>"
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- After that commit the changes and push to
GitHuband let the action run.
git add .github
git commit -m "add workflow"
git push
- You can see the actions running in
Actionstab in GitHub. - After that push, go to settings -> pages
Change Branch to
gh-pages & /rootand save.
- This will create another action -> pages-build-deployment.
- Once completed,
https://{github_username}.github.io/{repo_name}can be accessed.
By leveraging GitHub Actions and gh-pages, you can maintain a robust and automated pipeline for deploying your React applications.
Top comments (0)