Support for Angular applications

[raffaelespazzoli]

Describe the solution you'd like
Angular, and many other front end framework need to load the /index.html file when the static content is not found. This allows to support the concept of deep linking.
This is explained here

I found that the suggested approach has the following problem:

1. it does not handle correctly url parameters.
2. only works is the static app is at the root of the bucket, it does not work if the static app is a few levels down or if the bucket is designed to contain multiples apps at sister folders of the same level

Either way, the nginx configuration of this project was so convoluted that i couldn't find a way to figure out where to put the statement.

It would be great if logic could be added to this project to directly support this sue case.

[4141done]

Hello, thank you for raising this issue. I think it's one we should think about supporting or at least give some guidance on.

I think adding a feature to allow a fallback to a specific file either locally or in s3 would require some nontrivial refactors since we're currently using the 404 response code for something else.

Can you share a little about your desired setup to help me understand how this project could fit in?

[raffaelespazzoli]

single SPA app support behavior:
if a request is made for /<path1>/../<path2> or /<path1>/../<pathn>?<query_params> and that content does not exist the system returns /index.html or /index.html?<query_params>
Multi SPA app support (i.e. single bucket supporting multiple SPA applications): Assuming SPA applications are at /<path>/../<spa-path>. then if a request is made for /<path>/../<spa-path>/<path1>/../<path2> or /<path>/../<spa-path>/<path1>/../<path2>?<query_params>, the system returns /<path>/../<spa-path>/index.html or /<path>/../<spa-path>/index.html?<query_params>

[4141done]

Thanks for sharing those details - it's helpful to understand expectations around pathing From this I assume that the index.html file you'd like to fall back to is also stored in the same s3 bucket under the path for that particular application?

Finally, (and this is genuinely not a criticism, just me trying to understand) is there a reason that you're considering this project over some common AWS-based solutions like fronting an s3 bucket with cloudfront? Here's an example of that kind of setup: https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html

[lalewis7]

I found a workaround that sets the $uri_path to "/" when the URI does not have a file extension. So any sub-directories are set to the root directory which then serves index.html in the root folder.

s3_server.conf.template

if ($uri_path ~* "^/(?!.+\..+)") {
    set $uri_path "/";
}

[4141done]

@lalewis7 Thank you for sharing your response! I hope that this will help others. I intend to make some changes in the future to make things easier for single page application folks but your solution can be helpful until that happens.

I outlined an easy way to add things to s3_server.conf.template in this answer if you're not building the image yourself but rather using it as a base image.

[fcs-vtl]

I found a workaround that sets the $uri_path to "/" when the URI does not have a file extension. So any sub-directories are set to the root directory which then serves index.html in the root folder.

s3_server.conf.template

if ($uri_path ~* "^/(?!.+\..+)") {
    set $uri_path "/";
}

Hi @lalewis7 thanks for posting this. This has helped us too for React apps using React Router. @4141done Do you think we can revisit SPAs and a process for natively integrating it in the s3 gateway?