{"id":48116275,"url":"https://github.com/dsissoko/r3edge-primer-react","last_synced_at":"2026-04-04T16:15:49.302Z","repository":{"id":309864114,"uuid":"1037599493","full_name":"dsissoko/r3edge-primer-react","owner":"dsissoko","description":"Frontend development template with multi-target CI/CD.","archived":false,"fork":false,"pushed_at":"2025-10-20T17:01:31.000Z","size":3226,"stargazers_count":2,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-20T19:06:46.950Z","etag":null,"topics":["cicd","github-actions","gitpages","netlify","primer","react","vercel"],"latest_commit_sha":null,"homepage":"https://dsissoko.github.io/r3edge-primer-react/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dsissoko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-13T20:29:12.000Z","updated_at":"2025-08-27T15:17:02.000Z","dependencies_parsed_at":"2025-09-02T07:15:20.228Z","dependency_job_id":"c827e614-0305-4651-9d17-99a4d22ba869","html_url":"https://github.com/dsissoko/r3edge-primer-react","commit_stats":null,"previous_names":["dsissoko/r3edge-trading-app","dsissoko/r3edge-primer-react"],"tags_count":1,"template":true,"template_full_name":"primer/react-template","purl":"pkg:github/dsissoko/r3edge-primer-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsissoko%2Fr3edge-primer-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsissoko%2Fr3edge-primer-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsissoko%2Fr3edge-primer-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsissoko%2Fr3edge-primer-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dsissoko","download_url":"https://codeload.github.com/dsissoko/r3edge-primer-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsissoko%2Fr3edge-primer-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31405699,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cicd","github-actions","gitpages","netlify","primer","react","vercel"],"created_at":"2026-04-04T16:15:48.883Z","updated_at":"2026-04-04T16:15:49.293Z","avatar_url":"https://github.com/dsissoko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# r3edge Primer React Template | ![Logo](.readme/logo_ds.png)\n\n**A starter template for React, supercharged for seamless multi-platform deployments.**\n\n\u003e 🚀 **Why use this template?**\n\u003e\n\u003e ✅ **Solid Foundation**: Based on GitHub’s official [Primer React](https://github.com/primer/react-template) template.  \n\u003e ✅ **Universal Deployment**: Pre-configured for one-click deployment to Vercel, Netlify, GitHub Pages, and Docker Hub.  \n\u003e ✅ **Modern CI/CD Pipeline**: One commit triggers one build and one deploy. Each Pull Request generates preview environments accessible on Vercel, Netlify, and GitHub Pages.  \n\u003e ✅ **Modern Development Environment**: Fully compatible with GitHub Codespaces or local development in VSC.  \n\u003e ✅ **Bot Usage**: Keep dependencies always up to date with Dependabot, and **(coming soon)** code your features using Gemini CLI or Open Hands agents .  \n\nCe README est également disponible en Français 🇫🇷 ici: [👉 docs/README_fr.md](docs/README_fr.md)\n\n---\n\n## 📋 Key Features\n\n- ✅ **Modern Stack Template**: React 19 + Vite + Primer.  \n- ✅ **Standard Routing**: Uses `react-router-dom` for full control and maximum flexibility.  \n- ✅ **Simplified Deployment**: Includes `vercel.json` and `netlify.toml` config files.  \n- ✅ **CI/CD Workflow**: Ready-to-use GitHub Action to build and deploy on GitHub Pages.  \n\n---\n\n## ⚙️ Quick Start\n\nClick **Use this template** \u003e **Create a new repository**.  \nChoose your project name and visibility.  \n\n\u003e ⚠️ GitHub Pages does not work with free private repositories.  \n\n### For Development\n\n- With CodeSpaces:\n\n    `\u003c\u003e Code` \u003e `Codespaces` tab \u003e `Create codespace on main`\n\n- With local VSC:  \n\n    ```bash\n    git clone https://github.com/YOUR_USER/YOUR_REPO.git\n    cd YOUR_REPO\n    ```\n    Open VSC and launch a terminal, then:\n    ```bash\n    npm install\n    npm run dev\n    ```\n---\n\n### First Build \u0026 Deploy\n\nOnce your repo is created, GitHub will generate a first commit titled “Initial commit” and push it to `main`. This push automatically triggers the `deploy.yml` workflow.  \nThis action runs 4 jobs:  \n 1. Build the React code.  \n 2. Deploy to production on GitHub Pages.  \n 3. Deploy a preview on GitHub Pages.  \n 4. Build a container and upload it to Docker Hub.  \n\nFor the first commit, since your repository is not yet configured, the Docker job fails, and the preview job is skipped (only triggered on Pull Requests).  \nTherefore, the \"Deploy \u0026 Preview\" workflow fails, which is expected until you configure your GitHub repo to unlock all the features of **r3edge-primer-react**.\n\n![Screenshot showing the result of the 1st build workflow](.readme/1stbuild.png)\n\n### 📌 Post-Cloning Configuration\n\n#### 1. GitHub Pages Setup (Crucial)\n\nThis template uses a deployment strategy with a dedicated `gh-pages` branch.  \nThis is the most robust way to handle both production and temporary preview environments for Pull Requests.\n\n**Concept of the `gh-pages` branch:**  \n- Your `main` branch holds the **source code** of your app (React, JSX, etc.).  \n- The `gh-pages` branch contains the **compiled, ready-to-serve website** (pure HTML, CSS, JS).  \n- The GitHub Actions workflow compiles `main` and automatically pushes the result to `gh-pages`.  \n\n**Required Actions:**  \n\n1. Go to your repo’s settings: `Settings` \u003e `Pages`.  \n2. In `Build and deployment`, under `Source`, select **`Deploy from a branch`**.  \n3. Configure:  \n   - **Branch**: `gh-pages`  \n   - **Folder**: `/(root)`  \n4. Click **Save**.  \n\nThis tells GitHub to serve the content of `gh-pages` as your website.  \n\n#### 2. Workflow Secrets Configuration\n\nThe workflow needs secrets to connect to external services like Docker Hub.  \n\n1. Go to: `Settings` \u003e `Secrets and variables` \u003e `Actions`.  \n2. Add the following repository secrets:  \n   - `DOCKERHUB_USERNAME`: Your Docker Hub username.  \n   - `DOCKERHUB_TOKEN`: A [Docker Hub personal access token](https://hub.docker.com/settings/security) with `Read \u0026 Write` permissions.  \n\nThe `GITHUB_TOKEN` is automatically provided by GitHub and requires no setup.  \n\n#### 3. Vercel and Netlify Configuration\n\nThis template is ready for deployment on Vercel and Netlify.  \n\n1. Create a new project on Vercel or Netlify.  \n2. Connect your GitHub repo.  \n3. These platforms automatically detect the config files (`vercel.json` or `netlify.toml`) and apply the correct build settings (`npm run build`) and output directory (`dist`).  \n\n\u003e **Important Note for Vercel:**  \n\u003e By default, Vercel attempts to build *every* branch, including `gh-pages`.  \n\u003e This fails since `gh-pages` contains a pre-built site, not source code.  \n\u003e\n\u003e To fix this:  \n\u003e 1. Go to `Settings` \u003e `Git` in your Vercel project.  \n\u003e 2. Find **Ignored Build Step**.  \n\u003e 3. Paste this command:  \n\u003e     ```bash\n\u003e     if [[ \"$VERCEL_GIT_COMMIT_REF\" == \"gh-pages\" ]] ; then exit 0; else exit 1; fi\n\u003e     ```\n\u003e 4. Save. This cleanly cancels builds for `gh-pages` without error.  \n\nPR previews are automatically supported by Vercel and Netlify, no extra setup needed.  \n\n#### 4. Preview Lifecycle \u0026 Cleanup\n\n- **Vercel:** Lifecycle tied to the Git branch. Deleting the branch after merging a PR deletes all previews.  \n- **Netlify:** Lifecycle tied to the PR itself. Closing or merging the PR deletes the preview.  \n- **GitHub Pages (our solution):** **No automatic cleanup.** Preview folders (e.g., `/pr-preview/pr-123/`) persist even after PR closure. This is intentional for history keeping but can be modified to include cleanup if needed.  \n\n#### 5. Workflow Triggers\n\n- **Push on `main`**: Triggers production deployment.  \n- **Pull Request to `main`**: Triggers preview deployment.  \n\n#### 6. Production Actions (on `main`)\n\n1. **Deploy to GitHub Pages**: The site updates on its main branch.  \n   - Production URL: [https://dsissoko.github.io/r3edge-primer-react/](https://dsissoko.github.io/r3edge-primer-react/)  \n2. **Publish to Docker Hub**: A new Docker `latest` image is built and pushed.  \n\n#### 7. Pull Request Previews\n\n- Each Pull Request automatically gets a **preview version** deployed at a unique URL.  \n- The workflow posts a **comment in the PR** with the direct preview link for instant visual review. Example: [https://dsissoko.github.io/r3edge-primer-react/pr-preview/pr-19/](https://dsissoko.github.io/r3edge-primer-react/pr-preview/pr-19/).  \n\n![Screenshot showing github pages preview job](.readme/pr-preview.png)\n\n### 📌 Container Deployment (Docker)\n\n#### 1. Requirements\n\n1. **Docker**: Installed and running.  \n2. **Docker Hub Auth**: A Docker Hub account, logged in via terminal.  \n\n#### 2. Initial Setup (one-time)\n\n1. **Create your config file:**  \n    ```bash\n    cp docker/.env.example docker/.env\n    ```\n    Edit `docker/.env` to include your Docker Hub username.  \n\n2. **Login to Docker Hub:**  \n    ```bash\n    docker login\n    ```\n\n#### 3. Build the Image\n\n1. Make the build script executable:  \n    ```bash\n    chmod +x docker/build.sh\n    ```\n2. Run the script:  \n    ```bash\n    ./docker/build.sh\n    ```\n\n#### 4. Run the Container\n\n```bash\ndocker run -p 8080:80   -e BACKEND_API_URL=\"https://your-app.domain.com/api\"   yourusername/r3edge-primer-react:latest\n```\n\nOpen [http://localhost:8080](http://localhost:8080).  \n\n---\n\n## 📦 Reference Stack\n\n✅ This app relies on:  \n\n- Node 20 (Docker build)  \n- React 19.1 + React DOM 19  \n- Vite 7 + `@vitejs/plugin-react`  \n- Primer React 37 \u0026 `@primer/octicons-react`  \n- React Router DOM 7  \n- Styled-components 5  \n- ESLint 9 + PostCSS 10  \n- Nginx (production server)  \n\n---\n\n## 🗺️ Roadmap\n\n### 🔧 Next\n- Unit test examples (Vitest + React Testing Library)\n\n### 🧠 Under Consideration\n- AI bots Open Hands and Gemini CLI\n\n---\n\n📫 Maintained by [@dsissoko](https://github.com/dsissoko) – This project is an evolution of the official [Primer React](https://github.com/primer/react-template) template.  \n\n[![Dependabot Updates](https://github.com/dsissoko/r3edge-primer-react/actions/workflows/dependabot/dependabot-updates/badge.svg)](https://github.com/dsissoko/r3edge-primer-react/actions/workflows/dependabot/dependabot-updates) [![Deploy](https://github.com/dsissoko/r3edge-primer-react/actions/workflows/deploy.yml/badge.svg)](https://github.com/dsissoko/r3edge-primer-react/actions/workflows/deploy.yml) [![Netlify Status](https://api.netlify.com/api/v1/badges/0425ea76-64ff-43bc-b478-ea228b042648/deploy-status)](https://app.netlify.com/projects/r3edge-primer-react/deploys)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsissoko%2Fr3edge-primer-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsissoko%2Fr3edge-primer-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsissoko%2Fr3edge-primer-react/lists"}