Angular 8, Amplify and CloudFront

Amplify JS is a library that primarily provides oauth flow + hosted UI. As a managed service it also provides build pipeline. It uses CloudFront in the background for hosting and distributing content over the net.

You can also use Amplify JS without the hostedUI and manage your own CloudFront distributions.

One of the important things you will need to start off with is Amplify environments and git workflow.

An Amplify environment creates a backend – Cognito user pool, oauth config, CloudFront hosting, etc.

Amplify frontend is your JS project (angular, react, etc.) which mainly pertains to git.

Frontend Backend git/amplify workflow commands
develop dev git checkout develop; amplify env checkout dev; amplify publish; git add .; git commit -m “comments re your dev env changes”; git push;
develop test git checkout develop; amplify env checkout test; amplify publish; git add .; git commit -m “comments re your test env changes”; git push;
master prod git checkout master; git merge develop; amplify env checkout prod; amplify publish; git add .; git commit -m “comments re your prod env changes”; git push;

Use angular environments to manage env specific properties such as api url, etc.:

Note: You will need to manually update “build”: “ng build …” to point to configuration per the backend env you are working with as amplify publish only uses ng build

FQDN (www.kabuter.io) worked with social federation but APEX domain (kabuter.io) failed at getting a token…

STEP 1: To get APEX domain working, create a s3 bucket named exactly like APEX domain (in my case kabuter.io) and add static web hosting with redirect to FQDN (in my case https://www.kabuter.io).

STEP 2: Then create a CloudFront distribution with Origin Domain Name as <bucket-name>.s3.<aws-region>.amazonaws.com (in my case kabuter.io.s3.us-east-2.amazonaws.com). Provide APEX domain (kabuter.io) in the Alternate Domain Names (CNAMEs)

STEP 3: Then use the Domain Name from the created CloudFront distribution and point your Route 53 APEX domain (kabuter.io) as IP4 Alias to the Domain Name

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s