github action build & deploy gh-pages

.github/workflows/build-and-deploy.yml

@@ -0,0 +1,41 @@
+name: Build & Deploy
+
+on:
+  workflow_dispatch:
+# on:
+#   push:
+#     branches: ["main"]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    strategy:
+      matrix:
+        node-version: ["20.9.0"]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+
+      - name: Install packages
+        run: npm i
+
+      - name: Run npm build
+        run: npm run build
+
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          publish_dir: dist 
+          publish_branch: gh-pages
+          github_token: ${{ secrets.GITHUB_TOKEN }}

src/Router.tsx

@@ -24,4 +24,6 @@ export const router = createBrowserRouter([
         path: "*",
         element: <NoMatch />,
     },
-])
+], {
+    basename: global.basename
+})

src/vite-env.d.ts

@@ -1 +1,5 @@
 /// <reference types="vite/client" />
+
+declare const global: {
+    basename: string
+}

vite.config.ts

@@ -2,11 +2,23 @@ import path from "path"
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
 
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
+const basenameProd = '/react-shadcn-starter'
+
+export default defineConfig(({ command }) => {
+  const isProd = command === 'build'
+
+  return {
+    base: isProd ? basenameProd : '',
+    plugins: [react()],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
+    },
+    define: {
+      global: {
+        basename: isProd ? basenameProd : '',
+      },
     },
-  },
+  }
 })