BUILD MODERN REACT APPS POWERED BY AWS CLOUD

---

Overview

Just do

npx create-cdk-react-app my-new-app
cd my-new-app

Or specify language

npx create-cdk-react-app my-app --cdk typescript --react typescript
cd my-new-app

And you are off to the races into building your modern React web app with AWS backend.

Usage

npx create-cdk-react-app [app-name] [options]

Options

Option	Required	Description
--cdk	Optional	Either javascript or typescript. Will initialize the cdk app with the language specified. Defaults to javascript.
--react	Optional	Either javascript or typescript. Will initialize the create react app with the language specified. Defaults to javascript.

---

How to work with the project?

CCRA uses NPM's Workspace to setup the project as a mono-repo. This means that you can run your npm commands from the root to develop, test, and build the CDK app and the React app from the root of the project without having to worry about individual project setup. This is also helpful for setting up CI/CD, and project dependencies (for example- getting AWS resource ARNs as config file for your React App).

Workspace setup

The project uses a package.json to setup workspaces. There are two workspaces in the scaffolding

• ccra-react-app workspace for the React App
• ccra-cdk-app workspace for the AWS CDK App

The package.json also defines shortcuts for running the npm scripts for each of these workspaces from the root of the project. The following sections explains how.

React App

Install dependencies for the React application

npm install --save -w ccra-react-app

To install a new dependency for the React app

npm install --save <lib> -w ccra-react-app

Where <lib> is the npm library you wish to install. For example, to install date-fns as a dependency for the React app.

npm install --save date-fns -w ccra-react-app

To start the React app server

npm run react-app-start

To build the react app

npm run react-app-build

To test the react app

npm run react-app-test

AWS CDK App

Install dependencies for your AWS CDK app.

npm install --save -w ccra-cdk-app

WARNING ⚠️ : You must bootstrap CDK before proceeding with deployment. Please refer to documentation.

To bootstrap CDK

cd ccra-cdk-app && cdk bootstrap ...

To Synthesize a CloudFormation template from the AWS CDK App

npm run cdk-app-synth

To deploy the CDK app

npm run cdk-app-deploy

To delete the CDK app (⚠️ CAUTION: This will delete resources from the AWS Account)

npm run cdk-app-destroy

---

Advanced Usage

At the core of a CCRA bootstrapped project, there are three package.json files that work in tandem with each other to give you a great development, testing, and deployment experience.

├── my-app
│   ├── ccra-react-app
│   │   └── package.json
└── ccra-cdk-app
    │   └── package.json
    └── package.json

You may modify the package.json at the root of the project to customize the npm script shortcuts per your requirements. CCRA generates the following package.json at the root of the project, out of the box-

{
    "name": "create-cdk-react-app",
    "scripts":{
      "react-app-start": "npm start -w ccra-react-app",
      "react-app-build": "npm run build -w ccra-react-app",
      "react-app-test": "npm run test -w ccra-react-app",
      "react-app-eject": "npm run eject -w ccra-react-app",
      "cdk-app-deploy": "npm run cdk deploy -w ccra-cdk-app",
      "cdk-app-destroy": "npm run cdk destroy -w ccra-cdk-app",
      "cdk-app-synth": "npm run cdk synth -w ccra-cdk-app",
      "cdk-app-test": "npm run test -w ccra-cdk-app"
    },
    "workspaces": [
      "ccra-react-app",
      "ccra-cdk-app"
    ]
}

You can customize "scripts" to suit your needs. Please keep in mind, the scripts in this package.json are just references to scripts found in the individual project's package.json scripts. For example -

"react-app-build": "npm run build -w ccra-react-app"

points to the workspace ccra-react-app (which is the React App) package.json script-

"build": "react-scripts build"

The ccra-react-app and ccra-cdk-app's package.json files are from native CDK project template and Create React App template.

---

License

MIT-0 (see liecense)