CODEWITHSUNDEEP
angularamazon-s3angular-routing
Vihung
Vihung

Reputation: 13397

How do I get my Angular app deployed to S3 respond to routing URLs

I have Angular app that uses routing, built and deployed to an S3 bucket. It works fine if I go to the root of URL of the app. e.g. www.my-app.com.s3.foo.bar.amazonaws.com/

And it works fine within the app. For example if I follow a router link that points to ['/home'] it goes to www.my-app.com.s3.foo.bar.amazonaws.com/home and so on.

But if I go directly to, say, www.my-app.com.s3.foo.bar.amazonaws.com/home, I get an S3 error saying the resource does not exist. This is true - there is no file in the S3 bucket corresponding to /home.

How do I ensure that URL requests get routed through the app rather than to S3?

Update: It looks like CloudFront might do this. What do I configure in CloudFront?

Upvotes: 5

Views: 1622

Answers (1)

lemming
lemming

Reputation: 1863

You can configure CloudFront to handle what is a "not found" page from the S3 perspective, by returning the appropriate root page of your SPA.

  • Create your CloudFront distribution.
  • Go to the Error Pages tab in the distribution config and add a new error page.
  • The error you are handling from the CloudFront perspective is a 404 not found error, so enter 404 into the HTTP Error Code field.
  • Select the custom response and enter the location of the root html page for your app (in the S3 bucket) e.g. /index.html.
  • From the browser's perspective this was a valid request and response, so enter 200 for the HTTP Response Code field.

Upvotes: 4

Related Questions