How to serve angular 2 using amazon s3

Question

Is it possible to use amazon s3 to serve angular 2 app without using a dedicated server. If so how to proceed ?

Answer 1

Yes, you can deploy an application to AmazonS3 but you shouldn't serve it directly from Amazon S3: S3 is a Storing Service, not a Distribution Service. That's why you should create a CloudFront distribution for your S3 bucket.

Steps:

1. Build your app with npm run build --prod (be careful of including the --prod option!)

2. Create a CloudFront distribution for your Amazon S3 bucket and set your Default Root Object to index.html

3. If you use url rewrite and not hash strategy (your paths look like http://yourwebsite/login and not http://yourwebsite/#/login create a custom error response for your CloudFront distribution with the following:

   • HTTP Error Code: 404

   • Error Caching Minimum TTL (seconds): 0

   • Customize Error Response: Yes
   • Response Page Path: /index.html
   • HTTP Response Code: 200

You need also to be careful when you deploy your application to Invalidate index.html on CloudFront, otherwise an old version is cached and will be served to the client.

Please follow my guide for more details.