Serving Static Angular 5 Apps using AWS S3 & Cloudfront

Outline the goals for the sample Angular 5 application section, including installing the requirements, creating a sample application, and packaging it for production.

Install nodejs and verify with node -v, then install angular cli globally with npm install -g @angular/cli, and create your first sample application to begin angular development.

Create a sample Angular 5 application, run it locally on localhost:4200, view the project files and dependencies, and prepare packaging for production.

Pack the sample Angular app for production by running the build with production flags, generating a distributable folder ready for hosting in an S3 bucket.

Identify limitations of hosting a static Angular 5 app on AWS S3 and CloudFront, such as routing, no database access, and reliance on a web API for dynamic content.

Recap the steps to install the tooling, create a sample angular application, serve it with a local server, build a production distributable, and place the distributable folder in S3.

Explore the history and options of AWS S3, and learn how to upload a sample app to a bucket, enable static website hosting, and configure cross-region resource sharing.

Learn how AWS S3 provides simple, durable storage with multi-center replication, granular access control, and flexible storage classes, plus in-place object queries and easy data transfer.

Create and configure an S3 bucket for hosting a static Angular app, name it to match the domain, set the index page, upload the build, and enable public access.

Configure the bucket policy to allow public get object for all sources using the policy generator and S3 console. Then verify the static website hosting endpoint loads your app publicly.

Learn to manage errors in Angular 5 apps hosted on S3 by configuring a custom error document and handling 404s gracefully.

Configure the cors settings in your s3 bucket to specify allowed origins for accessing shared resources. This restricts fonts and other assets to designated domains.

Conclude the S3 configuration by mapping the DNS name and fixing permissions for public access, then prepare to update the DNS for direct site access next lesson.

Learn to set up a CloudFront distribution for a static Angular app in S3, apply settings, and delegate DNS with Route 53, including GoDaddy delegation and subdomain pointers.

Discover how CloudFront speeds static and dynamic content with global edge locations, caching, low latency, and geo restrictions, while supporting secure private content via signed URLs and versatile origins.

Create a CloudFront web distribution for an S3-hosted Angular app, configure origin settings and access identity, set default cache behavior, and add alternate domain names for deployment.

Troubleshoot CloudFront delivery by setting the default index.html, adjust bucket access policy, and verify access via CloudFront and Route 53 DNS for a static Angular app.

Learn to invalidate CloudFront cache after deploying to S3 so updates appear. Use distribution settings to create a new invalidation with paths like /assets/*.

Configure a custom domain by setting up a Route 53 hosted zone, delegating from GoDaddy, and creating an alias A record pointing to your CloudFront distribution to route traffic.

Demonstrates deploying a static angular app to an s3 bucket, serving it through a cloudfront distribution, and configuring route 53 dns with a custom subdomain for godaddy or other hosts.