Create a single page React app with CodeBuild Lambda Node.js
Create React App
Set up your source repository and artifacts bucket
Create a source repository for your project using yarn and Create React App.
To set up the source repository and artifacts bucket
-
On your local machine, run
yarn create react-app
to create a simple React app.<app-name>
-
Upload the React app project folder to a supported source repository. For a list of supported source types, see ProjectSource.
Create a CodeBuild Lambda Node.js project
Create an AWS CodeBuild Lambda Node.js project.
To create your CodeBuild Lambda Node.js project
-
Open the AWS CodeBuild console at https://console.aws.amazon.com/codesuite/codebuild/home
. -
If a CodeBuild information page is displayed, choose Create build project. Otherwise, on the navigation pane, expand Build, choose Build projects, and then choose Create build project.
In Project name, enter a name for this build project. Build project names must be unique across each AWS account. You can also include an optional description of the build project to help other users understand what this project is used for.
-
In Source, select the source repository where your AWS SAM project is located.
-
In Environment:
-
For Compute, select Lambda.
-
For Runtime(s), select Node.js.
-
For Image, select aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20.
-
-
In Artifacts:
-
For Type, select Amazon S3.
-
For Bucket name, select the project artifacts bucket you created earlier.
-
For Artifacts packaging, select Zip.
-
-
Choose Create build project.
Set up the project buildspec
In order to build your React app, CodeBuild reads and executes build commands from a buildspec file.
To set up your project buildspec
-
In the CodeBuild console, select your build project, then choose Edit and Buildspec.
-
In Buildspec, choose Insert build commands and then Switch to editor.
-
Delete the pre-filled build commands and paste in the following buildspec.
version: 0.2 phases: build: commands: - yarn - yarn add --dev jest-junit @babel/plugin-proposal-private-property-in-object - yarn run build - yarn run test -- --coverage --watchAll=false --testResultsProcessor="jest-junit" --detectOpenHandles artifacts: name: "build-output" files: - "**/*" reports: test-report: files: - 'junit.xml' file-format: 'JUNITXML' coverage-report: files: - 'coverage/clover.xml' file-format: 'CLOVERXML'
-
Choose Update buildspec.
Build and run your React app
Build the React app on CodeBuild Lambda, download the build artifacts, and run the React app locally.
To build and run your React app
-
Choose Start build.
-
Once the build has finished, navigate to your Amazon S3 project artifacts bucket and download the React app artifact.
-
Unzip the React build artifact and
run npm install -g serve && serve -s build
in the project folder. -
The
serve
command will serve the static site on a local port and print output to your terminal. You can visit the localhost URL underLocal:
in the terminal output to view your React app.
To learn more about how to handle deployment for a React based server, see
Create React App Deployment
Clean up your infrastructure
To avoid further charges for resources you used during this tutorial, delete the resources created for your CodeBuild project.
To clean up your infrastructure
-
Delete your project artifacts Amazon S3 bucket
-
Navigate to the CloudWatch console and delete the CloudWatch log groups associated with your CodeBuild project.
-
Navigate to the CodeBuild console and delete your CodeBuild project by choosing Delete build project.