Deploying Single Page App with AWS CDK V2

In this post, we will be developing a single-page application using Nuxt.js. A higher-level framework implementation built on top of Vue.js and has a bunch of production features that we can leverage on - like routing, code-splitting, full static implementation, and more.

We will be also using Github for our code repository and AWS CDK (Version 2) to create the development pipeline and S3 that will host static files for our SPA. Basically, the CDKv2 consolidates the construct libraries into a single package but at the time that I am writing this, it is still on developer preview.

To start, we need to make sure we have these items prepared in this development:

• Node.js and package manager (npm, yarn or npx)
• AWS CLI configured with the right access
• Github Personal Access Token

Let's install CDK and bootstrap our nuxt spa application. My preference, I'll separate the repository for the CDK SPA pipeline (hello-cdk-infra) and nuxt application (hello-cdk) but placing the buildspec file on the nuxt app so that it will be easier to update once we add things like env configs, static code analysis and etc.

npm install -g aws-cdk@next

npm init nuxt-app hello-cdk
cd hello-cdk
mkdir codebuild && curl -L https://git.io/J3xII -o codebuild/builspec.yml

git checkout -b develop
git add . && git commit -m "Initialize spa repository"
git remote add origin [e-mail]:username/hello-cdk
git push -u origin develop

Builspec details can be found in this gist and the screenshot below are the options I selected for our SPA.

Test the app by executing npm run dev, it should build the project and render our SPA in the browser.

---

Now we are done with the SPA part, let's create the pipeline and the S3 bucket that will host our application.

mkdir hello-cdk-infra && cd hello-cdk-infra
cdk init app --language typescript

Let's define our github config and region preference, update the file on the bin directory.

bin/hello-cdk-infra.ts

const app = new cdk.App();
const region : string = app.node.tryGetContext('region') || 'ap-northeast-1';
const config = {
  github: {
      owner: 'jaypeeig',
      repository: 'hello-cdk',
  },
  env: {
      region: region
  }
}

new HelloCdkInfraStack(app, 'HelloCdkInfraStack', config);
app.synth();

Next, we will define an interface for our Props and add the services we need for our spa pipeline, which by default is located in the lib directory.

lib/hello-cdk-infra-stack.ts

import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
export interface PipelineProps extends StackProps {
  github: {
    owner: string
    repository: string
  }
}
export class HelloCdkInfraStack extends Stack {
  constructor(scope: Construct, id: string, props?: PipelineProps) {
    super(scope, id, props);

    // The code that defines your stack goes here
  }
}

Let's import S3 from the construct library and add the bucket. Basically, this is the notable change on CDK v2, you don't have to manually install the libraries you need per service, you just have to pull it in aws-cdk-lib.

import { 
  Stack, 
  StackProps,
  RemovalPolicy,
  CfnOutput,
  aws_s3 as s3 
} from 'aws-cdk-lib';

...

const bucketWebsite = new S3.Bucket(this, 'websiteBucket', {
  websiteIndexDocument: 'index.html',
  websiteErrorDocument: 'index.html',
  publicReadAccess: true,
  removalPolicy: cdk.RemovalPolicy.DESTROY,
  cors: [
    {
       allowedOrigins: ['*'],
       allowedMethods: [S3.HttpMethods.GET],
    }
  ]
});

new CfnOutput(this, 'WebsiteURL', {
   value: bucketWebsite.bucketWebsiteUrl,
   description: "'Website URL',"
});

And then, let's initialize our pipeline and add our Github repository (hello-cdk) as the source stage of it. We will be needing the Github Access Token for this to work. To keep it secure, I will be using the SSM Paratemer store to keep the token and we will be pulling it once we deploy the infrastructure. It should be placed in the same region where you will deploy the CDK infrastructure.

• SSM Parameter Key for our token: /Demo/Github/AccessToken

import { 
  ....
  SecretValue,
  aws_codepipeline as codepipeline,
  aws_ssm as ssm,
  aws_codepipeline_actions as codepipeline_actions
} from 'aws-cdk-lib';

const outputSources = new codepipeline.Artifact();
const outputBuilds = new codepipeline.Artifact();

const githubToken = ssm.StringParameter.fromStringParameterAttributes(this, 'AccessToken', {
    parameterName: '/Demo/Github/AccessToken'
}).stringValue;

const pipeline = new codepipeline.Pipeline(this, 'Pipeline', {
    pipelineName: `HelloCDK`,
    restartExecutionOnUpdate: true
});

pipeline.addStage({
    stageName: 'Source',
    actions: [
    new codepipeline_actions.GitHubSourceAction({
        actionName: 'Merged',
        owner: props.github.owner,
        repo: props.github.repository,
        oauthToken: SecretValue.plainText(githubToken),
        branch: 'develop',
        output: outputSources,
        trigger: codepipeline_actions.GitHubTrigger.WEBHOOK
    })
    ]
});

Now we have the codepipeline and the github source defined, let us add a stage to build the SPA using codebuild and deploy the generated artifact to S3 bucket.

import { 
  ....
  aws_codebuild as codebuild
} from 'aws-cdk-lib';

const buildProject = new codebuild.PipelineProject(this, 'Build Nuxt SPA', {
  projectName: `HelloCDK-Build`,
  buildSpec: codebuild.BuildSpec.fromSourceFilename('./codebuild/buildspec.yml'),
  environment: {
    buildImage: codebuild.LinuxBuildImage.STANDARD_4_0,
  },
});

pipeline.addStage({
  stageName: 'Build',
  actions: [
    new codepipeline_actions.CodeBuildAction({
      actionName: 'Build',
      project: buildProject,
      input: outputSources,
      outputs: [outputBuilds]
    })
  ]
});

pipeline.addStage({
  stageName: 'Deploy',
  actions: [
    new codepipeline_actions.S3DeployAction({
      actionName: 'Website',
      input: outputBuilds,
      bucket: bucketWebsite
    })
  ]
});

Lastly, we will deploy our CDK stack in cli. This will deploy our infrastructure using cloudformation under the hood, but first we can check our code using cdk synth, if no error found, it will emit a valid cloudformation template, meaning our code is valid.

• Run cdk bootstrap first (required in version 2)
• Run cdk deploy to provision our pipeline

When finished, the URL of S3 static website is returned in CLI. Now we have a complete pipeline that automatically builds our SPA once our develop branch is updated.

Thanks for reading and happy coding :)

Repositories

• Nuxt SPA
• CDK Pipeline

---

Comments

[Raphael Jambalos]

Hi Jaypee! Great work on this! Last year, I had to create a similar project but I only knew CloudFormation back then. It took me hundreds of YAML to write what you were able to write in ~20-30 lines.

Just an aside, do you have a preference between CDK and Terraform?

[Jaypee Ignacio]

Thanks Jamby, both are great IaC tools (and community) but I prefer to use CDK on my projects, maybe because of language preference and code reusability.

I've also seen this CDK support for TF, but haven't tried yet
aws.amazon.com/blogs/developer/int...

[Dilshan Gunasekara]

There's small typo in the blow command:

mkdir codebuild && curl -L https://git.io/J3xII -o codebuild/builspec.yml

It should be

mkdir codebuild && curl -L https://git.io/J3xII -o codebuild/buildspec.yml

I spend some time trying to figure out why CDK cannot find my buildspec.yml. Hoope this would help someone.

[Dilshan Gunasekara]

Hi Jaypee, great article and thanks for this.
I'm getting this error when trying to deploy the stack

Parameters [/Demo/Github/AccessToken] referenced by template have types not supported by CloudFormation.

Any idea why ?

[Dilshan Gunasekara]

Found it !!

When I created the SSM I have to use the type String intead SecureString. Looks like the SecureString is not supported by CloudFormation ?