14

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

user93
  • 1,866
  • 5
  • 26
  • 45

3 Answers3

14

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.

coorasse
  • 5,278
  • 1
  • 34
  • 45
  • 2
    This should be the accepted answer. It clearly details the requirement to add a rewrite rule so that all requests get served the index.html (which S3 does not do) and distinguishes S3 as a storage platform. – Razor Oct 24 '17 at 02:19
8

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.

Yonatan
  • 1,319
  • 4
  • 13
  • 32
  • Confirmed. I got it up and running pretty quick by cloning [this](https://github.com/preboot/angular2-webpack) git repo, using `npm run build` and uploading the contents of /dist to an already set up aws s3 website bucket. Thanks Jo Jo. – Coxy Dec 19 '16 at 20:30
  • 2
    Additionally, you will want to make sure you address routing for urls other than index.html (e.g. http://example.com/items), as these need to be redirected to index.html in order to allow angular to route them - see http://stackoverflow.com/questions/16267339/s3-static-website-hosting-route-all-paths-to-index-html – Alan Wolman Feb 16 '17 at 19:47
  • npm run build needs the `--prod` option and you should not serve your files directly from amazonS3 since is a Storage Service and not a Distribution Service. – coorasse May 06 '17 at 07:07
  • 1
    Webpack has nothing to do with serving a site from S3. It's just a build step. You can use any task runner you like. Also, you're going to quickly run into problems when a URL does not specifically request index.html. All requests need to be rewritten to serve index.html. See the answer from @coorasse – Razor Oct 24 '17 at 02:20
-11

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.

uksz
  • 18,239
  • 30
  • 94
  • 161
  • Is it not possible even if the angular2 is written in JS instead of typescript so that it does not need trans compiling. – user93 Jul 18 '16 at 10:25
  • 4
    S3 **is** "at least a little server". What you can't do is to load it from a `file:///...` url from your local disc because of browser security constraints (at least not with additional command line parameters). You probably need to enable `HashLocationStrategy` because the default `PathLocationStrategy` requires server support. – Günter Zöchbauer Jul 18 '16 at 11:35
  • Thank you for clarification @GünterZöchbauer – user93 Jul 18 '16 at 11:51
  • *correction* should be "(at least not with**out** additional command line parameters)." – Günter Zöchbauer Jul 18 '16 at 11:52
  • This answer was valid in the very early stages but with aot is no longer correct. – zmanc Feb 01 '17 at 23:27