Deploy react app

.github/workflows/deploy-react-app.yml

@@ -0,0 +1,48 @@
+name: React App Deployment
+
+on:
+  push:
+    branches:
+      - deploy-react-app # branch name
+
+jobs:
+  deploy-react-to-gh-pages:
+    runs-on: ubuntu-latest
+    env:
+      EXAMPLE: example # environment variable
+
+    steps:
+      # checkout the repository content to github runner
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # setup nodejs environment
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18.16.1"
+
+      # cache the dependencies to speed up the build
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      # install dependencies
+      - name: Install dependencies
+        run: npm i
+
+      # build the react app
+      - name: Build
+        run: npm run build
+
+      # deploy the react app to github pages
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          # NOTE: GITHUB_TOKEN is a secret token that is automatically generated by GitHub
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build # directory to deploy

.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+

README.md

@@ -1 +1,67 @@
-# react-deployment-example
+# React Deployment Example
+
+[![Build Status](https://img.shields.io/github/actions/workflow/status/elar-saks/react-deployment-example/deploy-react-app.yml?branch=deploy-react-app)](https://github.com/elar-saks/react-deployment-example/actions)
+[![License: MIT](https://img.shields.io/badge/License-MIT-teal.svg)](LICENSE)
+
+<img src="https://media.licdn.com/dms/image/v2/D4D12AQHObzwwV-SWHg/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1690304767597?e=1756339200&v=beta&t=sIqyM2xH4NaGG4U3YH8SfOQZshzxp7ecifcJE_gSiSo" alt="React app deployment workflow example" style="display:block;width:100%;max-width:100vw;margin:0;padding:0;border:0;"> <br>
+
+> **Live example repository for the LinkedIn article:**<br>
+> [Automate React App Deployment with GitHub Actions](https://www.linkedin.com/pulse/automate-react-app-deployment-github-actions-elar-saks-/) by Elar Saks.
+
+---
+
+## Table of Contents
+- [What does this repo demonstrate?](#what-does-this-repo-demonstrate)
+- [How does it work?](#how-does-it-work)
+- [Features](#features)
+- [Getting Started](#getting-started)
+- [GitHub Actions Workflow](#github-actions-workflow)
+- [Related Resources](#related-resources)
+
+## What does this repo demonstrate?
+
+- **Automated deployment** of a React app to GitHub Pages using GitHub Actions.
+- Example workflow file: `.github/workflows/deploy-react-app.yml`.
+- Minimal React app in `src/`.
+
+## How does it work?
+
+- On every push to the `deploy-react-app` branch, the workflow:
+  1. Checks out the code
+  2. Sets up Node.js
+  3. Installs dependencies
+  4. Builds the React app
+  5. Deploys the `build/` folder to GitHub Pages using `peaceiris/actions-gh-pages`
+
+## Features
+- Zero-config React deployment to GitHub Pages
+- Modern GitHub Actions workflow
+- Easy to fork and adapt for your own projects
+- LinkedIn article for step-by-step guidance
+
+## Getting Started
+
+1. **Fork or clone** this repository.
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Build locally (optional):
+   ```bash
+   npm run build
+   ```
+4. Push changes to the `deploy-react-app` branch to trigger deployment.
+
+## GitHub Actions Workflow
+
+See the workflow file at `.github/workflows/deploy-react-app.yml` for details.
+
+## Related Resources
+- [LinkedIn Article: Automate React App Deployment with GitHub Actions](https://www.linkedin.com/pulse/automate-react-app-deployment-github-actions-elar-saks-/)
+- [GitHub Actions Documentation](https://docs.github.com/en/actions)
+- [GitHub Pages Documentation](https://docs.github.com/en/pages)
+
+---
+
+For a step-by-step guide and explanation, read the full article on LinkedIn:
+[Automate React App Deployment with GitHub Actions](https://www.linkedin.com/pulse/automate-react-app-deployment-github-actions-elar-saks-/)