Deploying react-app as Static Page displaying a blank page

1

I have a single gh repo with two folders, client and server. My server is deployed as a web service and is able to be deployed. My client is a create-react-app and while it is deploying, it is displaying a blank white page, the console displaying the following:

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

When deploying the app on localhost, the app works.

My Redirect/Rewrite is:

  • Source: /*
  • Destination: /index.html
  • Action: Redirect

Root directory set to ./client-front (this is my react app folder)
Build command set to npm run build
Publish directory set to public

In my client-side/package.json I have the following (relevant lines):

  • “homepage”: “.”

  • “engines”: {
    “npm”: “9.6.7”,
    “node”: “18.14.2”
    }

  • dependencies : “react-scripts”: “^5.0.1”

  • “scripts”: {
    “start”: “react-app-rewired start”,
    “build”: “react-app-rewired build”,
    “test”: “react-app-rewired test”,
    “eject”: “react-app-rewired eject”

  • devDependencies:
    “react-app-rewired”: “^2.2.1”,
    “react-error-overlay”: “^6.0.9”,

Please let me know if there is anything else I can provide to help get this working.

2

Hi @matthewmng,

It looks like the request to your homepage is successful, but there’s 400 errors retrieving manifest.json and favicon.ico. Can you check your index.html file and make sure that these are being referenced correctly?

Best,

3

Hi Jade,

My understanding is that the index.html file is being built when I deploy my app via the build command. Below I’ve pasted what is saved to my local folder when I run the build command on my own machine.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

I’ve also tried changing “homepage” in my package.json to “site.onrender.com”.

On page refresh, the following errors appear which is what you stated in your reply, but I’m unsure on how to fix this if my index.html file is being curated from the npm run build command.

GET /%PUBLIC_URL%/manifest.json 400
Manifest: Line: 1, column: 1, Syntax error.
GET /%PUBLIC_URL%/favicon.ico 400

4

I found my mistake and was able to fix the errors in my public/index.html file.

I’m no longer getting the 400 code, but my deployment is still not displaying any content and the console contains the following error:

DevTools failed to load source map: Could not load content for chrome-extension://bmnlcjabgnpnenekpadlanbbkooimhnj/browser-polyfill.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

5

Was able to resolve this issue. Publish directory should have been set to build, not public.

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.