Rewrites and redirects configuration for deploying on AWS amplify?

[ashish-y]

I have a react application with react-snap that works fine on an ec2 instance.

The nginx configuration on the instance looks something like

server {
        root /var/www/xxx.yyy.com;
        index index.html index.htm index.nginx-debian.html;

        server_name xxx.yyy.com www.xxx.yyy.com;

        location / {
                try_files $uri $uri/ /200.html$is_args$args;
        }
}

I recently ported everything to aws amplify. Using the default rewrite rule for SPA all the pages load fine but social crawlers are unable to crawl the pages for meta information.

AWS amplify default redirect and rewrite rule for SPA

[
    {
        "source": "</^[^.]+$|\\\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/200.html",
        "status": "200",
        "condition": null
    }
]

I also noticed that on the ec2 instance there is a trialing slash with all the urls and it's missing from aws amplify?

I tried few different configuration and if I add a / in source

/</^[^.]+$|\\\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

The social crawlers work and there the missing trailing slash also appears on the pages but some pages like 404 which don't have a Route link on the navbar throw:

Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>XXXXXXX</RequestId>
<HostId>XXXXXXXXXXXXXX</HostId>
</Error>

Any one got react-snap working with AWS amplify? I'm not well versed with rewrite rules so any help appreciated.

Here is how my build file looks on amplify:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - '# This installs Chrome on any RHEL/CentOS/Amazon Linux variant.'
        - curl https://intoli.com/install-google-chrome.sh | bash
        - npm ci
    build:
      commands:
        - npm run build
    postbuild:
      commands:
        - react-snap
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - /opt/google/**/*

In Package.json I have

"reactSnap": {
    "puppeteerArgs": [
      "--no-sandbox",
      "--disable-setuid-sandbox"
    ],
    "puppeteerExecutablePath": "/opt/google/chrome/google-chrome"
  },
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postbuild": "react-snap"
  },

[keshav263]

Hi, does it still work?