How to create a code pipeline stage to deploy React application with source code in github? [CDK 2.0]

Question

I have a React repository in GitHub, and I want to build a pipeline so that whenever I push new commit into the repository, the pipeline will build and deploy to production. I'm using CDK 2.0.

My pipeline code:

import * as cdk from "aws-cdk-lib";

import { Stack, StackProps } from "aws-cdk-lib";
import {
  CodePipeline,
  CodePipelineSource,
  ShellStep,
  Step,
} from "aws-cdk-lib/pipelines";
import { ManualApprovalStep } from "aws-cdk-lib/pipelines";
import { PipelineStage } from "./pipeline-stage";

export interface CodePipelineStackProps extends cdk.StackProps {
  // Built in Stack props
  readonly env: cdk.Environment;
  readonly description: string;
}

export class CodePipelineStack extends Stack {
  constructor(scope: cdk.App, id: string, props: CodePipelineStackProps) {
    super(scope, id, props);

    const pipeline = new CodePipeline(this, "Pipeline", {
      pipelineName: "MyPipeline",
      synth: new ShellStep("Synth", {
        input: CodePipelineSource.gitHub(
          "github-acount-name/my-react-code",
          "main"
        ),
        commands: [
          'npm ci',
          'npm run build',
          'npx cdk synth'
        ],
      }),
    });

  
    const gammaStage = pipeline.addStage(
      new PipelineStage(this, "Gamma", {
        env: props.env,
      })
    );

    gammaStage.addPre(
      new ShellStep("Run Unit Tests", { commands: ["yarn install", "npm test"] })
    );
    gammaStage.addPost(
      new ManualApprovalStep("Manual approval before production")
    );

    const prodStage = pipeline.addStage(
      new PipelineStage(this, "Prod", {
        env: props.env,
      })
    );
    
  }
}

What should I do here to add my react applications to the pipeline stage code? I can see from this example that it added a LambdaStack from local asset. However, I want to build the artifact from my GitHub repository.

export class PipelineStage extends cdk.Stage {
    constructor(scope: Construct, id: string, props?: cdk.StageProps) {
        super(scope, id, props);
        
    }
}

Answer 1

You have many options. To start with, the CDK has two pipeline flavours, codepipeline.Pipeline and pipelines.CodePipeline. The docs have guidance on which to choose, but in a nutshell:

1. pipelines.CodePipeline is opinionated and optimised for deploying CDK apps
2. codepipeline.Pipeline is more flexible for generic build tasks
3. The two largely overlap - you can solve many problems using either one
4. Under the hood, both deploy AWS::CodePipeline::Pipeline and AWS::CodeBuild::Project resources

Which should you choose? It's a matter of preference, but for generic build tasks I find the codepipeline.Pipeline API easier to reason about. Create a Stack with an S3 destination bucket and a Pipeline construct. A pipeline has one-or-many stages and each stage has one-or-many actions (aws-cdk-lib/aws-codepipeline-actions). Here is one way to approach it:

1. A source stage with a source action to pull your code from a remote repo, like actions.CodeCommitSourceAction
2. A build stage with an actions.CodeBuildAction to build the code. You provide it a buildspec to give install and build commands, set env vars, etc.
3. A deploy stage with an actions.S3DeployAction to output the built code to your destination bucket