Getting a Blank page when build folder is deployed to Netlify

I am trying to deploy a build folder of react app on Netlify. The uploading process shows no error & sites goes live, but blank page is observed.

my json file from the build folder:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [{
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

link to app

Answer

After inspecting the site you included, there were quite a few errors displayed in the console.

  1. Failed to load resource: the server responded with a status of 404 ()
  2. Manifest: Line: 1, column: 1, Syntax error.

It seems that your manifest.json file has a syntax error, so that would be a good place to start. Next, almost all of your build files are failing to be loaded by the page. That makes me think Netlify was able to deploy your site but the static assets from the build folder weren’t available hence the “Failed to load resource” error for all the build file chunks like main.e8a3c755.chunk.js.

Creating a Netlify Config file

The netlify.toml is a configuration file that specifies how Netlify builds and deploys your site. To start using one, just create a file called netlify.toml at the root directory of your project. This config file will supply Netlify with information about how your project should be built, how it should handle redirects, amongst other useful things.

[build]
  command = "npm run build"
  publish = "build-output"

 [[redirects]]
  from = "https://some-url.com"
  to = "https://some-other-url.com" 

The above defines some basic build configuration for the [build] context and redirect rules. The command setting specifies the default build command. This should be the build command you have defined in package.json. The publish setting specifies the directory that contains the deploy-ready static assets from your build. Therefore, the current publish setting would publish to the directory located at the absolute path root/build-output.

You can also define some redirect rules within [[redirects]]. It’s pretty straightforward, the from setting is the URL you wish to redirect from and to is where you should be redirected too. The default HTTP status code is 301, but you can supply a status key within [[redirects]] to provide a custom status code.

Bottom line, without seeing your project code or a link to it. It’s tough to pinpoint why exactly your build files aren’t being recognized when Netlify deploys your site. It boils down to how your build command is being used, for example how it’s being run "build": do build stuff and where the React build files are being output too. Lastly, make sure to create a netlify.toml file to provide Netlify with the details for how your site should be built and deployed. Here is a link to how Netlify recommends Deploying a React app.