Cognito Quickstart

What does this app do?

Tech Stack

Required Tools

• aws cli
• eb cli
• npm
• angular-cli

Frameworks

• AWS JavaScript SDK
• Angular 2
  • TypeScript
• Bootstrap

AWS Setup

Install the required tools

• Create an AWS account
• Install npm
• Install or update your aws cli
• Install or update your eb cli
• Install angular-cli

Getting the code and running it locally

# Clone it from github
git clone --depth 1 git@github.com:awslabs/aws-cognito-angular2-quickstart.git

# Install the NPM packages
cd aws-cognito-angular2-quickstart
npm install

# Run the app in dev mode
npm start

Creating AWS Resources

This sample application can be deployed to either Elastic Beanstalk or S3. S3 will host this application as a static site while Elastic Beanstalk gives you the capability of adding backend operations to the application.

• What is Elastic Beanstalk
• What is S3

# Install the AWS resources and deploy your application to either Elastic Beanstalk or S3
cd aws
./createResources.sh

Running the above command will create the necessary AWS resources and build & deploy your code to AWS. It will prompt you to choose your deployment target (S3 or Elastic Beanstalk).

After initially running the createResources.sh script, use the below commands to rebuild and redeploy

Update, Build and Deploy to Elastic Beanstalk

# Commit your changes in order to deploy it to your environment
git add .
git commit
eb deploy

# View your deployed application in a browser
eb open

Update, Build and Deploy to S3

# Build the project and sync the output with the S3 bucket
npm run build; cd dist; aws s3 sync . s3://[BUCKET_NAME]/

# Test your deployed application
curl –I http://[BUCKET_NAME].s3-website-[REGION].amazonaws.com/