How to deploy at subpath using AWS Amplify

Question

I have a React app, which I want to be accessed at /troubleshoot

I have setup in my React app

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "App";

// Material Dashboard 2 React Context Provider
import { MaterialUIControllerProvider } from "context";

ReactDOM.render(
  <BrowserRouter basename="/troubleshoot">
    <MaterialUIControllerProvider>
      <App />
    </MaterialUIControllerProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

and package.json

{
  "name": "test",
  "version": "2.1.0",
  "private": true,
  "homepage": "/troubleshoot",

I have deployed it on AWS Amplify

but I see it's not working

I was able to make this work with an nginx docker image

My docker file. I am putting the build in troubleshoot folder

FROM nginx:latest
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html
RUN mkdir -p /usr/share/nginx/html/troubleshoot
COPY ./build/ /usr/share/nginx/html/troubleshoot/
RUN ls -alR /usr/share/nginx/html

and my nginx conf

server {
  
  listen       80;
  
  location /troubleshoot {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/ /troubleshoot/index.html;
  }
}

and everything is working with the above docker docker setup.

but I want to now set this up using AWS Amplify. I am not able to do it

AWS amplify works if I want to directly access at / but not at /troubleshoot

Answer 1

Solving with Amplify Redirects

To solve this using Amplify Redirects, go to the "Rewrites and redirects" section in the Amplify UI. Add a rule to redirect everything from /troubleshoot/* to /*. Here is an example of the rule in JSON format:

[
    {
        "source": "/troubleshooting/<*>",
        "target": "/<*>",
        "status": "200",
        "condition": null
    }
]

You can use this rule for general purposes, but if you need to specify 404 pages or specific redirects, you may need different rules. You can find more information on the syntax and recommendations for redirects using Amplify in this link.

Solving with nginx

If you are using nginx with a specific Dockerfile, you can configure the redirects in the .conf configuration file using the redirect directive. Here is an example:

location ~ ^/troubleshooting(.*) {
    root /usr/share/nginx/html;
    try_files $1 $1/ /index.html =404;
}

To understand this approach better, you can refer to this question.