Gatsby site hosted on AWS Amplify redirecting to homepage always

Problem Statement

After connecting the app for continuous deployment by attaching the branch on my github repository (For those interested, details here: Connecting to AWS Amplify for deployment), any specific url provided was always getting redirected to my home page (./index.html)

Rewrites and Redirects

You Need to sign in to AWS account by clicking on on https://aws.amazon.com/amplify/. Once the credentials are provided. Click on Rewrites and redirects

Default entries

There were 3 default entries and was suspecting one of them was causing this issue, but wasn't certain.

1 default redirects new app

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

Approach

I could have spent time and understood the redirects by studying the regex closely, but even simpler was to remove one by one (starting with the most suspected) and trying.

Attempt 1

First removed the second entry which felt like it was grabbing all the entries after my website's url.

    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    },

which didn't help and pages were still getting redirected

Attempt 2

Removed the last entry

2 rule causing redirect to home page

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

and saved the updated entries 3 remove offending rule and save

and suddenly the specific urls were sticking without redirection to my homepage ( ./index.html)

So found the culprit


Bonus research

  • As per https://moz.com/learn/seo/redirection, seems like 301 redirection is preferred in terms for Search Engine Optimization (SEO) rather than 302 for the redirection of URL with and without www
  • The second rule there was to catch any urls that point to an invalid/non-existing page. So I had a 404.html in my static website and was to redirect to that page, rather than my homepage ( ./index.html`)

4 tweaks to redirection

So finally the working combination of Rewrites and Redirects is

[
    {
        "source": "https://narenvadapalli.com",
        "target": "https://www.narenvadapalli.com",
        "status": "301",
        "condition": null
    },
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

Steps to open the bulk edit text editor

Follow the steps to get to the bulk edits text editor

Edit button

1 default redirects new app

Open Text Editor button

5 text editor redirects

Text editor

6 bulk redirect edits

Latest Blogposts

SLURM Demo on AWS Ubuntu EC2 instance

Demo of slurm usage on a single instance of Ubuntu 24.04 EC2 instances on AWS

29 May 2024

SLURM on WSL

Setting up SLURM on WSL

27 May 2024

Introduction to SLURM

Simple Linux Utility for Resource Management (SLURM)

26 May 2024

How to find a linux machine is a VM (Virtual Machine) or a Bare Metal

If you can SSH into a linux machine and want to find out if its baremetal or Virtual Machine

7 November 2023

Storing Github access token in git credential store

Using git credentials store the github access token to avoid the re-prompting of username and pwd

4 April 2023

Token generation for Registering Self Hosted Github Runner via REST API

Explains how to generate a token using github API to be used in turn with Github self hosted runner registration

21 March 2023