Netlify & Vercel Blank Page with create-react-app

Question

I’ve deployed my backend on Render.com, but I'm having issues getting my frontend to work on both Vercel and Netlify. The latest attempt was with Netlify, but I encountered the same problem.

I'm using Vite with the Create React App command to build my app, along with React Router for client-side routing and Axios for making API requests to Render.com. Below are my package.json and file structure for reference:

[package.json] [structure]

THIS IS MY GITHUB REPO:

https://github.com/codingcreedd/messagingAppTOP

I tried adding "homepage": ".", "" and "./" but none of them worked. I tried using CI=false as an environment variable in netlify and in my package.json but it also failed. I also tried creating a _redirects file in the public directory, but nothing worked.

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    base: "https://whatsuptop.netlify.app/src/main.jsx",
});

this is my vite.config.js file as well if it helps

CreedCoding · Accepted Answer · 2024-10-02 12:12:15Z

0

I don't know how exactly it worked, but I woke up today and it was working, here are the things I have:

1- "homepage": "." in my package.json 2- Adding CI=false to the build command, ex: "CI=false vite build" 3- Creating a _redirects file in the public directory with the following content:

/*    /index.html   200

4- Changed my vite.config.js as follows:

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



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

   Make sure the base is / not ./ for loading the page on refresh as well. When I put it "./", the page was not blank on the first load but it was becoming blank whenever I refresh

5- Added netlify.toml file with the following content:

    [[redirects]]
       from = "/*"
       to = "/index.html"
       status = 200

edited Oct 2, 2024 at 12:12

answered Oct 2, 2024 at 7:18

CreedCoding

12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Netlify & Vercel Blank Page with create-react-app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related