CODEWITHSUNDEEP
reactjsdeploymentreact-router-domgithub-pagesvite
gikores
gikores

Reputation: 301

Deploying Vite.js React build to gh-pages

I'm having trouble deploying my SPA application to gh-pages and I'm not sure what I'm doing wrong. First, I build the project then I deploy the build directory to the gh-pages subtree of the same repo.

When I visit the deployment URL I'm faced with a blank page.

GitHub Repo

My vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/read-track/',
  plugins: [react()]
})

Upvotes: 1

Views: 2584

Answers (1)

gikores
gikores

Reputation: 301

After hours of research, I found out that when you are using react-router-dom > v4 and deploying to a sub-domain (for example /read-track in my case) you have to provide a basename attribute on the <BrowserRouter> with the sub-domain value. in my case I had to pass it like this <BrowserRouter basename="/read-track">

Upvotes: 2

Related Questions