This project automates the deployment of a React app to GitHub Pages using GitHub Actions.
Before proceeding, ensure you have the following:
- A GitHub repository for your React project.
- GitHub Actions enabled.
- Required secrets added to the repository settings:
REACT_APP_EMAILJS_SERVICE_IDREACT_APP_EMAILJS_TEMPLATE_IDREACT_APP_EMAILJS_USER_ID
Create a .github/workflows/deploy.yml file in your project directory with the following content:
ame: Deploy to GitHub Pages
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-22.04
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Create .env file
run: |
echo "REACT_APP_EMAILJS_SERVICE_ID=${{ secrets.REACT_APP_EMAILJS_SERVICE_ID }}" >> .env
echo "REACT_APP_EMAILJS_TEMPLATE_ID=${{ secrets.REACT_APP_EMAILJS_TEMPLATE_ID }}" >> .env
echo "REACT_APP_EMAILJS_USER_ID=${{ secrets.REACT_APP_EMAILJS_USER_ID }}" >> .env
- name: Install dependencies
run: npm install
- name: Build the React app
run: npm run build
- name: Deploy to GitHub Pages
uses: JamesIves/github-pages-deploy-action@v4
with:
branch: gh-pages
folder: build
token: ${{ secrets.GITHUB_TOKEN }}- Go to your GitHub repository settings.
- Navigate to the Pages section.
- Under the Branch section, select
gh-pages. - Save the settings.
Once the workflow is set up, push your code to the main branch:
git add .
git commit -m "Deploying React app"
git push origin mainAfter the GitHub Action completes successfully, your React app will be available at:
https://<your-github-username>.github.io/<repository-name>
- Ensure that your
package.jsonhas the homepage field set correctly:
"homepage": "https://<your-github-username>.github.io/<repository-name>/"- If you encounter deployment issues, check the Actions tab in your repository to debug.
Happy Deploying! 🚀