This is an aws-cdk project where you can deploy any SPA (React, Angular, Vue, etc.) via Codebuild on S3 and served via Cloudfront.
Link to the tutorial that I've written: https://dev.to/ryands17/deploying-a-spa-using-aws-cdk-typescript-4ibf
Note: This configuration is for GitHub only. For Bitbucket, you can edit the source accordingly.
Prerequisites
- Setup your access and secret keys via the aws-cli and with the profile name of your choice (the default profile is named
default). The credentials generated should have access to creation of all resources mentioned else it won't work.
Steps
- Rename the
.example.envfile to.envand replace all the values with predefined values for your stack.
Note: All the variables are mandatory! Without that, the stack wouldn't work.
-
Run
yarn(recommended) ornpm install -
Run
yarn deploy --profile profileNameornpm run deploy -- --profile profileNameto deploy the stack to your specified region. You can skip providing the profile name if it isdefault. -
You can start the build from the console in
Codebuildand view your website on the Cloudfront provided URL!
The cdk.json file tells the CDK Toolkit how to execute your app.
yarn buildcompile typescript to jsyarn deploydeploy this stack to your AWS account/region specified in the.envyarn watchwatch for changes and compileyarn testperform the jest unit testscdk diffcompare deployed stack with current statecdk synthemits the synthesized CloudFormation template