For whatever reason my Amplify hosted web app will no longer let me manually type to navigate to different routes. This is very important as it allows me to work and test different pages that aren’t easily acsessible from navigation bar.

When I click on buttons on the navbar to go to different routes it works correctly. For example when I click home it correctly navigates to “…/home”
The issue arrises when I try and type “…/home” the browser (happens across multiple browsers) appends a trailing slash so it becomes “…/home/” which is not a defined route and does not work.

I know there are work arounds on this, for example I could just embrace the trailing slash and move all my routes to work like this, but ideally I don’t want to do this and seems silly to make this change just because I cannot figure out what is going on.

In trying to diagnose the problem I spent a lot of time digging and researching. I think it could be related to a lot of potential things including an update to AWS Amplify, something to do with my SSL, any changes I may have made to my amplify configuration or my SAM template, something related to ngnix config, the way the routes are specified (this App.js and index.js file haven’t changed in a very long time and have been working previously).

Some of the main things I worked on include my template.yml (for SAM deployment) (snippet I think may be relevant):

  AmplifyRole:
    Type: "AWS::IAM::Role"
    Properties:
      AssumeRolePolicyDocument:
        Version: "2012-10-17"
        Statement:
          - Effect: Allow
            Principal:
              Service: "amplify.amazonaws.com"
            Action: "sts:AssumeRole"
      Policies:
        - PolicyName: "AmplifyAccessPolicy"
          PolicyDocument:
            Version: "2012-10-17"
            Statement:
              - Effect: Allow
                Action:
                  - "s3:*"
                Resource: "*"
              - Effect: Allow
                Action:
                  - "cloudfront:*"
                Resource: "*"
              - Effect: Allow
                Action:
                  - "lambda:*"
                Resource: "*"
              - Effect: Allow
                Action:
                  - "logs:*"
                Resource: "*"
      Description: "Role for AWS Amplify to access necessary AWS services"

  FrontendApp:
    Type: "AWS::Amplify::App"
    Properties:
      Name: !Ref "AWS::StackName"
      Repository: !Sub "https://github.com/${GitHubOrg}/${GitHubRepo}"
      AccessToken: !Ref GitHubAccessToken
      IAMServiceRole: !GetAtt AmplifyRole.Arn
      EnvironmentVariables:
        - Name: REACT_APP_BACKEND_URL
          Value: !Sub "https://${ClientAPIGateway}.execute-api.${AWS::Region}.amazonaws.com/Prod/graphql"
        - Name: REACT_APP_COGNITO_CLIENT_ID
          Value: !Ref CognitoUserPoolClient
        - Name: REACT_APP_COGNITO_DOMAIN
          Value: !Sub "${UserPoolDomain}.auth.${AWS::Region}.amazoncognito.com"
        - Name: REACT_APP_COGNITO_USERPOOL_ID
          Value: !Ref CognitoUserPool
        - Name: REACT_APP_REGION
          Value: !Ref "AWS::Region"
      BuildSpec: |-
        version: 1
        frontend:
          phases:
            preBuild:
              commands:
                - npm install
            build:
              commands:
                - npm run build
          artifacts:
            baseDirectory: build
            files:
              - '**/*'
          cache:
            paths:
              - node_modules/**/*

  MainBranch:
    Type: "AWS::Amplify::Branch"
    Properties:
      AppId: !GetAtt FrontendApp.AppId
      BranchName: !Ref BranchName
      EnableAutoBuild: true
      Stage: PRODUCTION

Outputs:
  FrontendUrl:
    Description: "URL for the frontend application"
    Value: !GetAtt FrontendApp.DefaultDomain

And the other file that I changed that may be relevant is my amplify.yml:

version: 1.0
frontend:
  phases:
    preBuild:
      commands:
        - cd frontend
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: frontend/build
    files:
      - '**/*'
  cache:
    paths:
      - frontend/node_modules/**/*

Any help would be greatly appreciated as I really have no idea what is going on at all here.