4

Manifest.json loads index.html on Google Chrome

The React App I am building has a manifest.json as follows, created when I first used Create-React-App:

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

However, when I publish the website using AWS-Amplify to a S3 bucket, the manifest.json loads my index.html instead. The first index.html response has the right header to my manifest.json, as below:

<link rel="manifest" href="/manifest.json">

Link to my manifest seems right and my website requested for it, only to have another index.html as response. The manifest.json file is located in the same directory as index.html.

In my localhost, the manifest.json loads nicely. When I tried building it and serve it from the build folder, the manifest.json also loads nicely. This problem only happens in our deployed website. I have checked the deployment files in S3 and it looks exactly the same as our built files so I don't know what is wrong.

I suspect it could be a Chrome issue because Manifest.json is not requested in Firefox and Edge. However, this does not explain why my localhost and local build is able to load manifest.json successfully in Chrome.

I expect manifest.json to be an actual json file, and not index.html.

Lumo Woong
  • 77
  • 1
  • 11
  • Are you sure the manifest.json is present in your public folder? Sounds like it can't find the file and redirects to index.html. – Webber May 09 '19 at 14:56
  • @Webber, before building, the manifest.json is in my public folder. After building, it is located in the same folder as index.html and is present in both my local build and deployed build – Lumo Woong May 09 '19 at 15:19
  • I have this problem too - did you manage to solve? – Raph117 Aug 31 '20 at 09:32
  • @Raph117, nope, project was eventually abandoned hahaha. I suspect some routing is handled wrongly (we were using Route53 back then). Good luck! – Lumo Woong Sep 01 '20 at 01:34
  • @LumoWoong hah sorry to hear that. Thankfully we got it sorted. The issue was the apache server though, so any front-end devs reading this might want to have a chat with the server guys – Raph117 Sep 01 '20 at 07:21

1 Answers1

0

This issue is solved for React apps deployed in Amplify here:

Aws-Amplify: manifest.json and env.json loading index.html

The main issue is that SPAs need server-side redirections to index.html, and the manifest should be an exception to those redirections,

María De La Asunción Gomez Cas
  • 1