Deploy App to github pages

.github/workflows/ci.yml

@@ -0,0 +1,43 @@
+name: Deploy react vite app to Github pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['ci']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Checkout the repository, install node js, and install node packages
+      - uses: actions/checkout@v4
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build
+
+      # Step 2: Deploy to GitHub Pages
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

src/components/sidebar/Sidebar.jsx

@@ -7,7 +7,7 @@ export const Sidebar = () => {
     <nav className="flex flex-col gap-4">
       <NavLink to="/">Home</NavLink>
       {projects.map((project) => (
-        <NavLink key={project.id} to={`/projects/${project.id}`}>
+        <NavLink key={project.id} to={`projects/${project.id}`}>
           {project.name}
         </NavLink>
       ))}

src/config/index.js

@@ -0,0 +1,3 @@
+export const appConfig = {
+  BASE_ROUTE: process.env.NODE_ENV === 'production' ? '/react-fall-2024' : '',
+};

src/main.jsx

@@ -8,14 +8,16 @@ import { BongoDevProjectPage } from '@/pages/bongodev';
 import { ThanWinProjectPage } from '@/pages/thanwin';
 import { TalhaProjectPage } from '@/pages/talha';
 
+import { appConfig } from './config';
+
 import './index.css';
 
 const root = createRoot(document.getElementById('react-app-root'));
 root.render(
   <StrictMode>
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<RootLayout />}>
+        <Route path={`${appConfig.BASE_ROUTE}/`} element={<RootLayout />}>
           <Route index element={<App />} />
           <Route path="projects/:projectId" element={<ProjectLayout />}>
             <Route path="bongodev" element={<BongoDevProjectPage />} />

src/pages/projects/useContributor.jsx

@@ -11,7 +11,7 @@ export const useContributor = ({ projectId }) => {
 
   const handleContributorChange = (selectedOption) => {
     setSelectedContributor(selectedOption);
-    navigate(`/projects/${projectId}/${selectedOption.value}`);
+    navigate(`projects/${projectId}/${selectedOption.value}`);
   };
 
   return {

vite.config.js

@@ -13,4 +13,5 @@ export default defineConfig({
   server: {
     port: 3000,
   },
+  base: '/react-fall-2024/',
 });