ReactProject is a high-level construct that creates a complete CI pipeline for React applications. It combines React-specific checks with Docker image building and publishing.
Overview
The ReactProject construct creates two sequential jobs:
- ReactCheckJob - Lints and tests the React project
- DockerPublishJob - Builds and publishes a Docker image
The jobs run in sequence, with Docker publishing only occurring if all checks pass.
Constructor
new ReactProject(
workflow: Workflow,
config: ReactProjectProps
)
Parameters
The cdkactions Workflow instance to add jobs to.
config
ReactProjectProps
required
Configuration object for the React project.
Name of the Docker image to publish (e.g., my-app-frontend).
Custom ID suffix to append to job names and IDs. Useful when using multiple ReactProject instances in a single workflow.
Location of the React project within the repository.
config.checkProps
Partial<ReactCheckJobProps>
Optional props to customize the React check job (Node version, package manager, etc.).
Optional overrides for the check job configuration.
config.publishProps
Partial<DockerPublishJobProps>
Optional props to customize the Docker publish job (registry, tags, etc.).
Optional overrides for the Docker publish job configuration.
Properties
The ID of the Docker publish job. Use this to create job dependencies.
The full name of the Docker image that will be built and published.
Basic Usage
Add a React project workflow to an existing workflow:
import { ReactProject } from '@pennlabs/kraken';
import { Workflow, Stack } from 'cdkactions';
const workflow = new Workflow(this, 'build', {
name: 'Build and Test',
on: 'push',
});
const react = new ReactProject(workflow, {
path: 'frontend',
imageName: 'my-app-frontend',
});
Advanced Usage
Multiple React Projects
Use the id parameter to differentiate between multiple React frontends:
const reactOne = new ReactProject(workflow, {
id: 'one',
path: 'frontendOne',
imageName: 'project-frontendOne',
});
const reactTwo = new ReactProject(workflow, {
id: 'two',
path: 'frontendTwo',
imageName: 'project-frontendTwo',
});
Custom Node Version
Configure the Node.js version used for testing:
const react = new ReactProject(workflow, {
path: 'frontend',
imageName: 'my-app-frontend',
checkProps: {
nodeVersion: '18',
},
});
Using Job ID for Dependencies
Create jobs that depend on the React project completing:
import { ReactProject, DeployJob } from '@pennlabs/kraken';
const react = new ReactProject(workflow, {
path: 'frontend',
imageName: 'my-app-frontend',
});
// Deploy only after React build completes
new DeployJob(workflow, {}, {
needs: [react.publishJobId],
});
Full Example with Django
Combine React and Django projects in a single workflow:
import { DjangoProject, ReactProject, DeployJob } from '@pennlabs/kraken';
import { Workflow, Stack } from 'cdkactions';
const workflow = new Workflow(this, 'workflow', {
name: 'Build and Deploy',
on: 'push',
});
const django = new DjangoProject(workflow, {
projectName: 'djangoProject',
path: 'backend',
imageName: 'project-backend',
});
const reactOne = new ReactProject(workflow, {
id: 'one',
path: 'frontendOne',
imageName: 'project-frontendOne',
});
const reactTwo = new ReactProject(workflow, {
id: 'two',
path: 'frontendTwo',
imageName: 'project-frontendTwo',
});
new DeployJob(workflow, {}, {
needs: [django.publishJobId, reactOne.publishJobId, reactTwo.publishJobId],
});
Generated Workflow
The ReactProject construct generates the following job sequence:
React Check Job
↓
Docker Publish Job
See Also