Giter Site home page Giter Site logo

howardpanton / aws-cognito-angular-quickstart Goto Github PK

View Code? Open in Web Editor NEW

This project forked from amazon-archives/aws-cognito-angular-quickstart

0.0 0.0 0.0 1.58 MB

An Angular(v5)-based QuickStart single-page app utilizing Amazon Cognito, S3, and DynamoDB (Serverless architecture)

Home Page: https://cognito.budilov.com

License: Apache License 2.0

TypeScript 59.72% JavaScript 3.67% HTML 19.48% CSS 4.58% Shell 12.55%

aws-cognito-angular-quickstart's Introduction

Cognito Quickstart

Creator: Vladimir Budilov

What does this app do?

QuickStart Angular2 Cognito App

Tech Stack

Required Tools

Frameworks

AWS Setup

Install the required tools (the installation script only runs on Linux and Mac)

Getting the code and running it locally

This uses the pre-configured AWS resources hosted by AWS

# Clone it from github
git clone --depth 1 [email protected]: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.

createResources.sh requires your aws cli to be configured for JSON output.

# 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). Choosing 'S3' makes your deployment completely serverless, while choosing Elastic Beanstalk will create an EC2 instance that will host this NodeJS app.

Caution: You might incur AWS charges after running the setup script

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

S3: Update, Build and Deploy

# 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/

NOTE: You might want to reshuffle some of the "package.json" dependencies and move the ones that belong to devDependencies for a leaner deployment bundle. At this point of time, AWS Beanstalk requires all of the dependencies, including the devDependencies to be under the dependencies section. But if you're not using Beanstalk then you can optimize as you wish.

or

Beanstalk: Update, Build and Deploy

# 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

Local Testing

This section contains instructions on how to test the application locally (using mocked services instead of the real AWS services).

LocalStack

To test this application using LocalStack, you can use the awslocal CLI (https://github.com/localstack/awscli-local).

pip install awscli-local

Simply parameterize the ./createResources.sh installation script with aws_cmd=awslocal:

cd aws; aws_cmd=awslocal ./createResources.sh

Once the code is deployed to the local S3 server, the application is accessible via http://localhost:4572/cognitosample-localapp/index.html (Assuming "localapp" has been chosen as resource name in the previous step)

aws-cognito-angular-quickstart's People

Contributors

ababkin avatar amirtoole avatar doapp-jeremy avatar dpantke avatar gadams999 avatar hyandell avatar jameshow avatar vbudilov avatar whummer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.