Amplify-console: 404 rewrite functionality

[Yaroslav-F]

Please describe which feature you have a question about?
Built-in Cloudfront distribution. Possibly related to https://github.com/aws-amplify/amplify-console/issues/40.

Provide additional details
I've got a tiny problem with my react app. The way react router dom is built - it requires a little Cloudfront hack to work with S3 hosting.
Otherwise links in the app will be hopelessly broken.
I love the way Amplify Console simplifies CD flow for react apps greatly, but unfortunately I can't edit Cloudfront distribution for the app? It doesn't appear neither in aws cloudfront list-distributions output nor in management console.

Is there any way to leverage Cloudfront functionality with amplify console for react apps?

[nimacks]

Hi @Yaroslav-F, Unfortunately there is currently no way to edit CloudFront distribution settings for your app. I'll make a note of your feature request and pass this on to the team.

[swaminator]

@Yaroslav-F what functionality would you like from the CloudFront distribution? Amplify Console offers fully managed hosting to offer features such as instant cache invalidation, atomic deploys, password protection, and redirects.

[Yaroslav-F]

@swaminator I need the Custom Error Page functionality from these aws docs.
This would allow me to customise an error path for 404 (and possibly 403 as well) code as described here.

Unfortunately I can't see any other way to fix react-router-dom with S3 hosting just now.
The issue is - whenever I go to any path in the application, like /sign-in directly (not through clicking react-router links) - I get 'Access Denied' S3 error.
Going through clicking react-router Link Component works just fine though, but then if you refresh the page - you get S3 'Access Denied' again.
See the link above for the full description of the issue and some alternative solutions for apps not hosted on S3.

Hope it helps. Happy to answer any more questions.
Y

[swaminator]

@Yaroslav-F this functionality is currently being worked on. You can track it here: https://github.com/aws-amplify/amplify-console/issues/70

[swaminator]

The issue is - whenever I go to any path in the application, like /sign-in directly (not through clicking react-router links) - I get 'Access Denied' S3 error.
Going through clicking react-router Link Component works just fine though, but then if you refresh the page - you get S3 'Access Denied' again.

@Yaroslav-F just re-read your response. The above functionality is available by adding this redirect to your app: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

[Yaroslav-F]

@swaminator that worked! Thanks a lot!