Building a Full Stack Application with CDK

In the previous chapter, we learned about the concept of monorepos and how they help you organize your CDK code alongside higher-level separations such as infrastructure, frontend, and backend code. As we mentioned earlier, this isn’t a rule when working with CDK. We’re sure there will be better ways discovered by the CDK development community as processes evolve and more developers get to use it in their projects. For now, this way of organizing your code is good enough, so let’s see how it all comes to life in a practical fashion.

In this chapter, we are going to learn about the following main topics:

• Building a Node.js and Express.js backed API
• Creating a React application that integrates with the API
• Bringing it all to life with AWS CDK and using services such as Elastic Container Service and DynamoDB
• How CDK helps with building Docker images for ECS

You might already know how to build...

Setting up and building the stack

If you haven’t done so already, go ahead and clone the following repository: https://github.com/PacktPublishing/AWS-CDK-in-Practice.

The Code in Action video for this chapter can be viewed at: https://packt.link/GZxqU.

Heads up

In this chapter, we will also be using Docker tooling. You can find the installation setup for your operating system by visiting https://docs.docker.com/get-docker/.

You will find the code for this chapter in the relevantly named chapter-3-building-a-full-stack-app-with-cdk directory. Just like we did with the last chapter, we have separated the code into the following main directories:

• infrastructure will hold our CDK components
• server will contain the code for our Express.js-based API
• web is essentially a React-based frontend that hooks up to the API

If you dig into any of these directories, you will see that they each have their own README files, package.json, and various other relevant...

Fixing the frontend code

The frontend is a standard React application. The application entry point is index.ts, which is located under the ./web/src directory. This, in turn, loads the App component. The App component holds the Header, SideBar, and Main components of our application. You can examine the rest of the code by yourself, but the bits we are interested in are within the Main component, which is located at /web/src/components/Main/index.ts. Open the file in your text editor and let’s examine what is happening with our frontend not being able to make the calls to our API. See the following extract of the file:

...
{ MainContainer } from './styles';
/* ----------
 * Add backend URL provided by the cdk deploy here!
 * ---------- */
const backend_url = 'http://localhost:3333/';
export const Main: React.FC = () => {
  /* ----------
   * States
   * ---------- */
  const [todos, setTodos] = useState...

Examining the CDK code

As you’ve already guessed, the CDK code resides within the /infrastructure directory, with the CDK entry point being the /infrastructure/bin/chapter-3.ts file:

#!/usr/bin/env node
import 'source-map-support/register';
import * as cdk from 'aws-cdk-lib';
import { Chapter3Stack } from '../lib/chapter-3-stack';
const app = new cdk.App();
new Chapter3Stack(app, 'Chapter3Stack', {});

Nothing fancy is going on here. We are just telling it to load up the root stack of the CDK app, which is Chapter3Stack. Open /infrastructure/lib/chapter-3-stack.ts in your code editor:

export class Chapter3Stack extends Stack {
  public readonly dynamodb: Dynamodb;
  public readonly s3: S3;
  public readonly ecs: ECS;
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);
    this.dynamodb = new Dynamodb(this,...

Summary

You now know how to deploy any Docker-based image on ECS using the power of CDK. Not only that but you also know how to set up DynamoDB tables and serve static HTML files and SPAs via S3 buckets.

In the next chapter, we will address a few of the problems of our TODO application. We will learn how to set up continuous integration/continuous delivery (CI/CD) and we will also secure our application by generating TLS certificates for our load balancer. All done via CDK.