Skip to content
Use AWS CDK with CodePipeline to deploy a TypeScript Create-React-App.
TypeScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
infra
public chore: Initial commit Jan 22, 2020
src
.gitignore chore: Initial commit Jan 22, 2020
.prettierrc
LICENSE.md
README.md Update README.md Jan 23, 2020
cdk.json
config.ts
package.json
tsconfig.cdk.json
tsconfig.json
yarn.lock chore: Initial commit Jan 22, 2020

README.md

CRA Pipeline

MIT License Read Tutorial

Example AWS CDK project to deploy a TypeScript SPA created with create-react-app using AWS CodePipeline and AWS CodeBuild. Of course, styled-components is included as well …

http://pipeline-files8e6940b8-tyzn4y41xz9l.s3-website-us-east-1.amazonaws.com

Architecture

Components

Usage

$ > yarn cdk deploy Pipeline

Pipeline: deploying...
Pipeline: creating CloudFormation changeset...

✅  Pipeline

Outputs:
Pipeline.WebsiteURL = http://pipeline-files8e6940b8-3p9gac9qjzax.s3-website-us-east-1.amazonaws.com

Configuration

// Edit ./config.ts

export const config = {
  github: {
    owner: 'sbstjn',
    repository: 'cra-pipeline',
  },
  env: { region: 'us-east-1' },
}

Preliminaries

Install AWS CDK

# Using NPM
$ > npm install -g aws-cdk

# Using Yarn
$ > yarn global add aws-cdk

Configure AWS CLI

Generate an Access Key and Secret Access Key for your AWS account.

$ > export AWS_ACCESS_KEY_ID=""
$ > export AWS_SECRET_ACCESS_KEY=""
$ > export AWS_SESSION_TOKEN=""

Bootstrap AWS CDK

$ > yarn cdk bootstrap --region us-east-1

⏳  Bootstrapping environment aws://123456789001/us-east-1...

0/2 | 5:06:49 PM | CREATE_IN_PROGRESS   | AWS::S3::Bucket | StagingBucket
0/2 | 5:06:50 PM | CREATE_IN_PROGRESS   | AWS::S3::Bucket | StagingBucket Resource creation Initiated
1/2 | 5:07:11 PM | CREATE_COMPLETE      | AWS::S3::Bucket | StagingBucket

✅  Environment aws://123456789001/us-east-1 bootstrapped.

Configure GitHub Token

Create a personal access token in GitHub and store it in AWS SecretsManager. The token needs permissions to read your (private) repositories and configure webhooks.

$ > aws secretsmanager create-secret \
    --name GitHubToken \
    --secret-string abcdefg1234abcdefg56789abcdefg \
    --region us-east-1

{
  "ARN": "arn:aws:secretsmanager:us-east-1:123456789001:secret:GitHubToken-uNBxTr",
  "Name": "GitHubToken",
  "VersionId": "4acda3d1-877f-4032-b38e-17bc50239883"
}
You can’t perform that action at this time.