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

Question

The React App my am building has a manifest.json and a env.json as follows,

However, when I publish the website using AWS-Amplify to a S3 bucket, the manifest.json and env.json loads my index.html instead. Everything is working as it should in localhost but in production we are having the previous issue even though we can get other files as icons and robot.txt.

The content of our public folder is the next:

asset-manifest.json
browserconfig.xml
ec4c4f981671b5dee24ab5f541f07720.png
ef7c6637c68f269a882e73bcb57a7f6a.woff2
env.json <----- loading index.html
icons
index.html
main-5fbcf0b95e5bf6891f54.js
main-5fbcf0b95e5bf6891f54.js.LICENSE.txt
manifest.json. <----- loading index.html
robots.txt.   <------ working
service-worker.js

The amplify.yml file looks as:

 version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - NODE_ENV=$MY_ENV_SELECTOR node ./node_modules/webpack/bin/webpack.js --mode production --env=prod 
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

It looks like it is serving us the index.html because it is not finding the requested files, but we do not have a clue about why this is happening.

We hope anyone can help us with this problem.

I have a similar problem with manifest.json, I have it in my public folder and it is not downloaded when I deploy the app with amplify. However, if a test it in my local server it works perfectly. — F.bernal, Mar 27 '20 at 11:01
@F.bernal Can you fetch other files from your public folder? — Ruben Rosemary, Mar 27 '20 at 11:04

score 4 · Answer 1 · answered Dec 05 '20 at 11:43

I may have found the answer, working for me.

So I am building a Single Page App (SPA) using React and React-router.

I had to put in a redirect rule to manage the way the router works. As per the amplify docs.

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200 (Rewrite)

Seems like this is also pushing the request for manifest.json to go to index.html

I solved this by adding another rule to my amplify console:

Source address: /manifest.json
Target address: /manifest.json  
Type: 200 (Rewrite)

Would be interested to know if this works for anyone else.

This worked in my case. But only when the redirect of the manifest.json is before the redirect of the index.html — wenzf, Oct 05 '22 at 08:00

score -3 · Accepted Answer · answered May 01 '20 at 08:26

-3

I found the problem.

Basically Amplify has a redirect functionality that we needed to configure for serving this files.

Thanks to everyone!

answered May 01 '20 at 08:26

Ruben Rosemary

164
14

Sharing the process undertaken to solve the issue with code would be much helpful. – Merouane T. Aug 15 '22 at 12:01

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

2 Answers2

Linked