2

I have created a Angular 2 form which posts the form data to a postgres DB using a Rest API. Now, I want to serve my Angular 2 app on AWS S3. I googled on this and I found that creating a webpack is a solution but not able to create one. I want to know where to start with, to bundle my code and serve it on s3.

GitHub link for Form: https://github.com/aanirudhraj/Angular2form_signaturepad_API

Thanks for the Help!!

DilumN
  • 2,889
  • 6
  • 30
  • 44
Raj
  • 125
  • 3
  • 17

4 Answers4

1

The quickest way is to build the app using angular-cli and then deploy the content of the 'dist' directory as a static site in S3 (an S3 bucket can be configured to host a static site; make sure you assing read permission to 'anybody' to avoid http 4xx return codes).

Picci
  • 16,775
  • 13
  • 70
  • 113
0

You just need to host it as a static site on S3. Check this: http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

Naguib Ihab
  • 4,259
  • 7
  • 44
  • 80
0

I infer from your code that you are using angular-cli.

  • Create a dev/production build

    ng build --dev / ng build --prod

  • Content of your dist folder will contain bundled files for deployment. Your primary file for refrence will be 'index.html' as this will load you angular app.
  • You need to decide what kind of server you'll be using to serve you webapp.
    For development purpose when we do ng serve , webpack-dev-server is used as a static file server (local development). I'll recommend should go with the most comfortable/cost effective solution you can have when deploying to actual server.

Static file Server

(*)Following aproach will also allow you to have some server-side code if you require in future.

Community
  • 1
  • 1
Ankesh
  • 4,847
  • 4
  • 38
  • 76
0

When you deploy your ng2-app, you should use AOT(ahead of time) compile. I guess you are using JIT(just in time) compile.

In angular2 guide page,

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

When you use JIT compile, your browser will download vendor.js which is defined by angular2 compiler and it will compile your app just in time. It will be too slow and your client have to download vendor file. When you use AOT, you dont have to use vendor file, so resources are being smaller.

I recommend to use AOT compile when you deploy your app, and use lazy loading for resource size.

If you are curious about ng2 AOT compile, read this guide.

angualar2-cookbook-AOT

And here is example angular2 app with webpack2 and lazy load.

use file structure and config files in here.

When I tested with example app, files bundled with aot was smaller than 500KB.

angular2-webpack2-aot

When you use aot compile with @ngtools/webpack or whatever,

just put all files in dist directory which have files compiled with aot in your S3 bucket, and I recommend to use aws cloudfront cache for your s3 bucket resources.

MiraGe
  • 311
  • 4
  • 8