Prevent AWS Amplify From Adding Trailing Slash and Forcing Redirect

Question

I am using AWS Amplify and cannot figure out how to configure my rewrite and redirects or routes.js to prevent trailing slashes from breaking my functionality.

When I run my code locally and try to visit localhost:3000/foo/bar/id the page renders fine. When I deploy this same code through amplify and user clicks a button with an href, the browser gets a 302 and redirects the user to example.com/foo/bar/id/, then because this page doesn't exist, the default Amplify redirect sends them to index.html with a 404

I have tried adding the following to my react routes:

/foo/bar/:id
/foo/bar/:id/

and the following redirect rules in the AWS Amplify console:

/foo/bar/<id>  | /foo/bar/<id> | 302
/foo/bar/<id>/ | /foo/bar/<id> | 302

but nothing is working. I am losing my mind here, any suggestions?

MJBZA · Accepted Answer · 2021-02-26 23:59:55Z

38

Amplify adds a trailing slash to prevent urls like /about.html but that's probably not the real cause. Your app/browser is making requests to the server with routes that don't exist server-side (you're using SPA routes which are strictly client-side). Try adding the following redirect rule in the amplify js console (under App Settings: Redirects and rewrites > Edit > Open Text Editor):

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

This rewrites all files to /index.html which is the only route that exists server-side. For more info, checkout the docs on Trailing Slashes and Redirects for SPAs.

Here is a picture about how to do this settings in the aws amplify:

It is better that we copy the JSON object in the provided text editor.

Otherwise if you are going to use the webform please take care that you must enter this string as source:

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

the reason is webform will scape the backslashes!

edited Feb 26, 2021 at 23:59

MJBZA

5,0488 gold badges64 silver badges110 bronze badges

answered Oct 20, 2019 at 4:21

hyperaeolian

3812 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MJBZA Over a year ago

It was really helpful. I will add a picture to your answer for clarification. I followed the solution and it resolved my issue.

adR Over a year ago

Thanks this worked for me and resolved my issue. Whenever I loaded the website I developed in Chrome/Firefox on my phone, closed the app and re-opened it which reloads the last website, Amplify would give me an AccessDenied error...

Sriram Karthick Jun 11 at 14:08

Will this works fine for non-SPA based website like Astro - static site generator package

Marco · Accepted Answer · 2021-04-30 16:44:09Z

5

I had the same issue with my Next.js site on Amplify. After testing around for a few hours I've found the following solution:

[{
    "source": "/report/<slug>/",
    "target": "/report/<slug>",
    "status": "200",
    "condition": null
},
{
    "source": "/report/<slug>",
    "target": "/report/<slug>.html",
    "status": "200",
    "condition": null
}]

Add this to your redirects, then it should work.

You just have to replace "report" with your url parts.

answered Apr 30, 2021 at 16:44

Marco

912 silver badges11 bronze badges

1 Comment

Hasan Ali Over a year ago

Thank you for this! I've been looking all over the internet for this fix!

Priyam Ghosh · Accepted Answer · 2021-09-29 10:59:48Z

1

Adding the below one in the Rewrites & Redirect section worked for me as well. The trailing slash is now working.

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

answered Sep 29, 2021 at 10:59

Priyam Ghosh

617 bronze badges

1 Comment

Sriram Karthick Jun 6 at 9:24

This looks insightful

Collectives™ on Stack Overflow

Prevent AWS Amplify From Adding Trailing Slash and Forcing Redirect

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related