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

No, it is not possible to run angular2 using amazon s3 without dedicated server. According to Angular2 Docs, you need at least little server to run those files. What you can do, is to run NodeJs server on E3 or ESB, and deploy your angular2 app there.

Thanks to @Gunter for pointing out - this can't be done without additional command line parameters.

Answer 2

It is possible. But then you should use webpack.

After you configure your app to work with webpack, you can npm run build and upload the processed files to S3 as a static website.

Answer 3

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.