Amplify SPA with site redirects too

Question

I have the following redirect file and the www redirect is not working.  Instead the the main URL returns a 304 and then all the assets correct get a 301 redirect.  But the site remains on the wrong URL. I changed the site to "somesite" since AWS suggested I not put real details in the question.

Again:
* https://somesite.xyz - works
* https://somesite.xyz/subpage - works
* https://demo.somesite.xyz - returns 304 and stays on url
* https://demo.somesite.xyz/image.png - returns 301 and redirects to https://somesite.xyz/image.png
* www redirect has the same issue as demo

```
[
  {
    "source": "",
    "status": "200",
    "target": "/index.html"
  },
  {
    "source": "https://demo.somesite.xyz",
    "status": "301",
    "target": "https://somesite.xyz"
  },
  {
    "source": "https://www.somesite.xyz",
    "status": "301",
    "target": "https://somesite.xyz"
  },
]

re:Post Agent · Answer

The issue you're experiencing with your redirects in AWS Amplify is likely due to the configuration of your redirect rules. Let's break down the problem and suggest some solutions:

1. SPA (Single Page Application) Routing:
Your first rule is correctly set up to handle SPA routing, ensuring that all non-asset requests are directed to index.html.

2. Subdomain Redirects:
The rules for redirecting "demo" and "www" subdomains are not working as expected. This is likely because the redirect rules in Amplify are applied after the request reaches the Amplify-hosted application, not at the DNS level.

To resolve this:

a) Custom Domain Configuration:
Ensure that you have properly set up custom domains in your Amplify app settings. You need to add all variations of your domain (www, demo, and the root domain) as custom domains in Amplify.

b) Modify Redirect Rules:
Instead of using full URLs in the "source" field, use patterns that match the incoming request's path. For example:

```
[
{
"source": "",
"status": "200",
"target": "/index.html"
},
{
"source": "///",
"status": "301",
"target": "https://somesite.xyz"
},
{
"source": "///",
"status": "301",
"target": "https://somesite.xyz"
}
]
```

c) Consider Adding a Catch-All Rule:
To ensure all subdomains redirect to the main domain, you could add a catch-all rule:

```
{
"source": "https://:subdomain.somesite.xyz",
"status": "301",
"target": "https://somesite.xyz"
}
```

3. DNS Configuration:
Make sure your DNS settings are correctly pointing all subdomains to your Amplify app. This is crucial for the redirects to work properly.

4. Clear Cache:
After making changes, be sure to clear any caches (both in Amplify and in your browser) to ensure the new rules are being applied.

5. Verify SSL Certificates:
Ensure that SSL certificates are properly set up for all domain variations in Amplify.

If the issue persists after implementing these changes, you may need to review your Amplify app's overall configuration or consider reaching out to AWS support for further assistance, as there might be specific settings or limitations in your setup that are not immediately apparent.

Remember to test thoroughly after making any changes to ensure all paths and subdomains are behaving as expected.  
**Sources**  
[I getting the 301 issue while deploy my code in the aws amplify | AWS re:Post](https://repost.aws/questions/QUzvpy9zHDR_eY2yCbr_95OQ/i-getting-the-301-issue-while-deploy-my-code-in-the-aws-amplify)  
[AWS Amplify | Extensible Web & Mobile Apps | Amazon Web Services](https://aws.amazon.com/amplify/extensibility/)  
[Redirect configuration from deleted Amplify project didn't get deleted along side the project and can no longer get deleted | AWS re:Post](https://repost.aws/questions/QUU8fK3iBeSPCYIeK_Ia7-sQ/redirect-configuration-from-deleted-amplify-project-didn-t-get-deleted-along-side-the-project-and-can-no-longer-get-deleted)

Amplify SPA with site redirects too

Add your answer

Relevant content