0

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

Improve this question
2
  • Do you have a netlify.toml file? You can configure build related details there. The JSON you included looks more like the manifest file for a PWA. Commented Apr 6, 2021 at 5:03
  • no I don't have do i need to create a .toml file inside build folder ? Commented Apr 6, 2021 at 5:05

2 Answers 2

Reset to default
3

Open your package.json file and make the homepage section blank:

{
  "name": "react-table",
  "version": "0.1.0",
  "private": true,
  "homepage": "",
...
}

My homepage was set to "homepage": "https://tamalanwar.github.io/periodic-table/",

As a result, Netlify was trying to open the JS and CSS files from the /periodic-table/ directory and returning a 404 error.

This fixes my issues.

So set the domain name here or leave it blank until you decide on a production URL.

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

Comments

1

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.

Improve this answer

2 Comments

thanks tanner after adding toml file & referencing the docs i was able to make the site up
@Lp-Tester Your welcome. I'm glad you were able to get things up and running. Happy coding!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.