Fix/GitHub pages deploy

[dsissoko]

This pull request resolves the issue of the application failing to load on GitHub Pages (blank page) by introducing a robust and portable deployment
configuration. The changes ensure that the application works seamlessly on various static hosting platforms like GitHub Pages, Vercel, and Netlify
without requiring manual path adjustments.

Key Changes:

• Dynamic Base Path in Vite (vite.config.js):
  The Vite configuration now uses a VITE_BASE_URL environment variable to set the base path. This makes the build artifact portable, as asset paths
  are correctly resolved based on the deployment environment.

• Explicit Router Configuration (src/index.jsx):
  The application's entry point has been updated to use an explicit router setup with createBrowserRouter. The router's basename is now
  synchronized with the Vite base path via the same VITE_BASE_URL variable, ensuring client-side routing works correctly within the deployment
  subdirectory.

• GitHub Pages SPA Redirect (public/404.html):
  The 404.html file has been configured with a redirection script to handle client-side routing on GitHub Pages. This script intercepts 404 errors
  on deep links (e.g., on page refresh) and redirects them to index.html, allowing the React Router to manage the route correctly.

• CI/CD Workflow Enhancement (.github/workflows/deploy.yml):
  The deployment workflow has been improved in two ways:

  1. It now triggers on pull_request events, enabling deployment previews to test changes before merging.
  2. A dedicated step has been added to dynamically set the VITE_BASE_URL based on the repository's name, making the entire process automatic and
     maintenance-free.

How to Test:

1. Observe the GitHub Actions workflow triggered by this pull request.
2. Once the deploy job is complete, access the deployment preview URL.
3. Verify that the application loads correctly.
4. Navigate to different pages and reload the browser on a specific route to confirm that the SPA redirect is working as expected.

[francinelucca]

Hi @dsissoko can you elaborate more on the need for these changes? is there a way to reproduce the blank page error?

[dsissoko]

Hi

Hi @dsissoko can you elaborate more on the need for these changes? is there a way to reproduce the blank page error?

Hi,

First of all, this isn’t really a fix — it’s an enhancement. The goal is to make deployment frictionless on GitHub: as long as the templates stay 100% frontend (no backend code, only API calls if needed), they can be deployed on GitHub Pages, which is pretty cool.

To reproduce the issue with the current version, simply activate the GitHub Pages feature and you’ll see a blank page instead of the Mona playground.

FYI, I cloned your repo to turn it into a starter for multi-target deployment. You can check it out here: https://github.com/dsissoko/r3edge-primer-react.
Give it a ⭐ if you like it!

And by the way: big thanks for the current template — it’s really useful and nicely done!