reactjsvitegithub-pagesnetlify

React App in Prod and Github Page showing blank screen

I've been trying to figure out this issue since yesterday, going through videos and discussions, following everything to a t, yet I'm shown the same error over and over. I created my website using Vite + React (I'm very new to both) and tried to deploy to Github Pages and Netlify, but the website won't show. I even tried the server production build and it still didn't work. I honestly have no clue what's going on, any help is appreciated. Here is my repo for reference: Link to github repo. You can also check out the latest netlify app as well: peppy-griffin-276833.netlify.app. This contains my dist file only (in reference to this video).

This is my package.json:

 "name": "my-website",
  "homepage": ".",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

This is my vite.config.js:

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

// https://vite.dev/config/
export default defineConfig({
  base: "./",
  plugins: [react()],
})

This is how my site is supposed to look

My website

This is how it's showing in production and all deployments: My website in production

This is my index.html in dist folder

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alex Fuller</title>
    <script type="module" crossorigin src="./assets/index-FmxQ_R_g.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-DmEcuB40.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

This is the index.html in React folder:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alex Fuller</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="src/main.jsx"></script>
  </body>
</html>
Solution

  • I created a new React project without Vite, added my files and edited any areas needed, and deployed it to Netlify and that worked.