Site is live, but sill blank screen (react app)

Do i run the above command in the public folder?

It’s not a command. That is what you put into the _redirects file (the contents of the file)

AWESOME! THANK YOU! my page loads now:

I really appreciate your help :raised_hands:
this is my first attempt building a react app, do you have any recomendations?

1 Like

Hey there, @shagariboy :wave:

Not react specific per-say, but if you are looking to learn a bit we do have our Jamstack Explorers program. Check it out:

1 Like

Hello, I’m also having the issue of a blank page appearing even though my react act successfully deployed. I’ve read through the above comments but am still unsure what the issue is. Below are my links:
Netlify: https://dapper-begonia-95cb66.netlify.app/
Github: GitHub - Ellie575/react-weather-app-reimagined

Would appreciate any insight/feedback into the matter. Thanks.

You’re site is not requesting any kind of JavaScript required by React:

view-source:https://dapper-begonia-95cb66.netlify.app/:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>Weather App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

It appears you’ve modified this file: react-weather-app-reimagined/index.html at main · Ellie575/react-weather-app-reimagined · GitHub than what React provides you. You’d have to reset that file.

Hi @hrishikesh,
Thank you for your speedy response.

As suggested, I tried resetting this file and deployed again, but it is still displaying a blank page. There is a note in this html file as follows:

<noscript>You need to enable JavaScript to run this app.</noscript>

Is there an extra step I need to take to enable JavaScript? Sorry for the simple questions, I am new to coding.

Hey @Ellie575

The <noscript> tag is normal.

What value is set for the publish directory in your build settings? Based on the HTML comments in the file e.g.

<!--
  Notice the use of %PUBLIC_URL% in the tags above.
  It will be replaced with the URL of the `public` folder during the build.
  Only files inside the `public` folder can be referenced from the HTML.

  Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
  work correctly both with client-side routing and a non-root public URL.
  Learn how to configure a non-root public URL by running `npm run build`.
-->

I believe you may have public set as the publish directory. The default output directory for React is build (see documentation here and here) and as such, this is the value you need to use as the publish directory.

Hi @coelmay,

You are correct, my publish directory was set as public. I just tried setting it as build as suggested, and it failed to deploy. The log is as follows.:

1:40:05 PM: Build ready to start

1:40:17 PM: build-image version: d2c6dbeac570350a387d832f64bc980dc964ad65 (focal)

1:40:17 PM: build-image tag: v4.8.0

1:40:17 PM: buildbot version: 29e546ddee264a16af472b38ccba15b350150213

1:40:18 PM: Fetching cached dependencies

1:40:18 PM: Starting to download cache of 581.9KB

1:40:18 PM: Finished downloading cache in 254.540144ms

1:40:18 PM: Starting to extract cache

1:40:18 PM: Finished extracting cache in 13.79569ms

1:40:18 PM: Finished fetching cache in 268.708673ms

1:40:18 PM: Starting to prepare the repo for build

1:40:18 PM: Preparing Git Reference refs/heads/main

1:40:18 PM: Parsing package.json dependencies

1:40:19 PM: No build steps found, continuing to publishing

1:40:19 PM: Creating deploy upload records

1:40:19 PM: Failing build: Failed to build site

1:40:20 PM: Failed during stage 'building site': Deploy directory 'build' does not exist

1:40:20 PM: Finished processing build request in 2.560411957s

I’ve also changed the build command as npm run build in the past, but it also failed to deploy.

If you are deploying a React app, you will need a build step as you will see mentioned in the documentation I linked to.

What are the build settings you are using? Can you share the repository you are deploying?

Hi @coelmay,
Here is the repository I’m deploying:

Could you point out again which part of the documentation provided points to the build step? I apologise, as I’m still new to coding and I seem to keep missing the information.

Here are my build settings:
BuildSettings

Thanks @Ellie575

The code you wish to deploy is inside the my-app directory. Thus, you need to set the base directory to my-app as per the Build a single site from a subdirectory or monorepo.

The Publish Directory will have my-app added to it so it will read my-app/build which is the correct setting.

Thanks @coelmay,
I changed the Base Directory to my-app so the Publish Directory reads as my-app/build as suggested and still no luck… Here is the log result:

12:48:52 PM: Build ready to start
12:48:56 PM: build-image version: d2c6dbeac570350a387d832f64bc980dc964ad65 (focal)
12:48:56 PM: build-image tag: v4.8.0
12:48:56 PM: buildbot version: 29e546ddee264a16af472b38ccba15b350150213
12:48:56 PM: Fetching cached dependencies
12:48:56 PM: Starting to download cache of 581.9KB
12:48:56 PM: Finished downloading cache in 126.85405ms
12:48:56 PM: Starting to extract cache
12:48:56 PM: Finished extracting cache in 13.877077ms
12:48:56 PM: Finished fetching cache in 141.014408ms
12:48:56 PM: Starting to prepare the repo for build
12:48:57 PM: Preparing Git Reference refs/heads/main
12:48:57 PM: Parsing package.json dependencies
12:48:58 PM: Different build dir detected, going to use the one specified in the Netlify configuration file: 'my-app' versus 'my-app/' in the Netlify UI
12:48:58 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'my-app/build' versus 'build' in the Netlify UI
12:48:58 PM: No build steps found, continuing to publishing
12:48:58 PM: Creating deploy upload records
12:48:58 PM: Failing build: Failed to build site
12:48:58 PM: Failed during stage 'building site': Deploy directory 'my-app/build' does not exist
12:48:58 PM: Finished processing build request in 2.205388679s

You still don’t have a build step.

As you are deploying a React app, you need to build it. Commonly you would use npm run build as outlined in the documentation I previously linked:

I changed the Build Command to npm run build as suggested and it worked! The page is no longer blank, and successfully deploys! Thank you very much!

1 Like

Hey there!
I am suffering from the same problem.
It shows a blank screen even though I have added everything and fixed all the issues.
The odd part is I have other react apps running on netlify fine but since this one is using react-router, it is giving me all sorts of problems.
Here is a link to the github: GitHub - HOPE028/waitlist: A Multipage React And Firebase Based App.
Here is the website: https://main--kaleidoscopic-trifle-3bab03.netlify.app/
I would appreciate any help possible!

Try removing the homepage from here: waitlist/package.json at main · HOPE028/waitlist · GitHub

That was exactly it!
Thank you so much

Plese I also have this same issue. I have changed my publish directory to build.

Where do I get the netlify.toml file and how do I add

I have this same issue please assist.

Here is the link to the github: GitHub - VictorPelumi/Repas-Food-Order-Webapp: This project allows users to select meals from an available list after which it is been logged in a responsive cart where the number and quantity of orders could be reduced or increased respectively. You could also check out all that was added to cart and place an order which would be sent to a database
Here is the website link: https://zippy-caramel-2b5e2b.netlify.app/

please i would indeed appreciate any assistance that could be rendered