Deploy back and frontend CDK project through new CodePipeline construct

[jhummel]

I'm having trouble with a deployment of a API + React project via the CodePipeline construct. The main issue is that I need to get an output from my stack to be used as an environment variable when building my front-end code. After this happens, the code needs to be deployed to a S3 bucket.

Here's a pseudo breakdown of my code, at the end I've left a comment on what I'd like to do next, but can't seem to figure it out:

Stacks

export class BackendStack extends Stack {
  readonly apiURL: CfnOutput;

  constructor(scope: Construct, id: string, props: StackProps) {
    super(scope, id, props);

    const lambda = new aws_lambda.Function(this, 'demo-lambda', {
      code: aws_lambda.Code.fromAsset('lambdas/root'),
      ...
    });
    
    const api = new aws_apigateway.LambdaRestAPI(this, 'demo-api', { handler: lambda });

   /* I need to get this in my frontend code before it can be built */
    this.apiURL = new CfnOutput(this, 'API', { value: api.url });
  }
}

export class FrontendStack extends Stack {
  readonly bucketURL: CfnOutput;

  constructor(scope: Construct, id: string, props: StackProps) {
    super(scope, id, props);

    /* creates a bucket for my frontend code */
    const bucket = new aws_s3.Bucket(this, 'demo-bucket', {...})
    this.bucketURL = new CfnOutput(this, 'Bucket', { value: bucket.bucketWebsiteUrl });
  }
}

Stage

export class DemoStage extends Stage {
  public readonly apiURL: CfnOutput;
  public readonly bucketURL: CfnOutput;

constructor(scope: Construct, id: string, props: StageProps) {
    super(scope, id, props);

    const backendStack = new BackendStack(this, 'backend', props);
    const frontendStack = new FrontendStack(this, 'frontend', props);

    this.apiURL = backendStack.apiURL;
    this.bucketURL = frontendStack.bucketURL;
  }
}

Pipeline Stack

export class DudaDemoEnvPipelineStack extends Stack {
  constructor(scope: Construct, id: string, props: StackProps) {
    super(scope, id, props);

    const source = CodePipelineSource.gitHub('...', 'main', {
      authentication: SecretValue.secretsManager('...')
    })

    const synth = new CodeBuildStep('Synth', {
      input: source,
      commands: ['cd app', 'npm ci', 'npm run build', 'npm run cdk synth', 'mv cdk.out ../']
    });

    const pipeline = new CodePipeline(this, id, {
      crossAccountKeys: true,
      pipelineName: id,
      synth
    });

    const deploy = new DemoStage(this, 'PreProd', {
      env: { account: '...', region: 'us-west-2' }
    })

    const deployStage = pipeline.addStage(deploy);

    /* I'm lost here - How do I now create a new step that can get the deploy.apiURL output 
       and pass it to the npm run build command as an environment variable? Once the code is
       built, how do I move the files to the bucket that was just created by my stack? */
  }
}