Update config.json file for a static frontend React site, using AWS CodePipeline and CDK

Question

I'm building a CDK Pipeline that with update another CDK template. This CDK template is a static frontend react app. The backend uses an AWS Lambda, API Gateway, and CloudFront Distribution to host the site. I want to put the api's in the config.json file as I normally would if I were building it manually one service at a time.

The problem seems to be in the cdk pipeline-stack, which builds the static-frontend-stack. When you initialize a new pipeline, it wants you to add shell steps first, (npm i, cd into correct folder, npm run build, etc) which creates the distribution folder I need. As well as turning the whole thing into a CF template.

Then you can drop that into different stages you want, e.g., test and prod.

However, I won't receive CfnOutputs until the stages are built. And the CfnOutputs hold the api's and other info I need to put into the config.json file (which was already built first, and created empty values).

There is even a envFromCfnOutputs param to add to the initial codebuild pipeline, but since they are initialized/created later, typescript yells at me for putting it in there before. I understand why that errors, but I can't figure a clever way to fix this issue.

import * as cdk from "aws-cdk-lib";
import { Construct } from "constructs";
import * as pipelines from "aws-cdk-lib/pipelines";
import * as codecommit from "aws-cdk-lib/aws-codecommit";
import { Stages } from "./stages";
import { Stack, Stage } from "aws-cdk-lib";

interface PipelineStackProps extends cdk.StackProps {
  env: {
    account: string;
    region: string;
    stage: string;
  };
}

export class PipelineStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props: PipelineStackProps) {
    super(scope, id, props);

    /************ Grab Repo ************/
    const source = codecommit.Repository.fromRepositoryName(
      this,
      "PreCallbackSMSSolution",
      "PreCallbackSMSSolution"
    );

    /************ Define Pipeline & Build ShellStep (for Frontend) ************/
    const Pipeline = new pipelines.CodePipeline(this, "Pipeline", {
      pipelineName: `CodePipeline`,
      selfMutation: true,
      crossAccountKeys: true,
      synthCodeBuildDefaults: {
        rolePolicy: [
          // @desc Policy to allow CodeBuild to use CodeArtifact
          // @external https://docs.aws.amazon.com/codeartifact/latest/ug/using-npm-packages-in-codebuild.html
          new cdk.aws_iam.PolicyStatement({
            actions: [
              "codeartifact:GetAuthorizationToken",
              "codeartifact:GetRepositoryEndpoint",
              "codeartifact:ReadFromRepository",
            ],
            resources: ["*"],
          }),
          new cdk.aws_iam.PolicyStatement({
            actions: ["sts:GetServiceBearerToken"],
            resources: ["*"],
            conditions: {
              StringEquals: {
                "sts:AWSServiceName": "codeartifact.amazonaws.com",
              },
            },
          }),
        ],
      },
      synth: new pipelines.ShellStep("Synth", {
        input: pipelines.CodePipelineSource.codeCommit(source, "master"),
        installCommands: [
          "cd $CODEBUILD_SRC_DIR/deployment",
          "npm install -g typescript",
          "npm run co:login",
          "npm i",
        ],
        env: {
          stage: props.env.stage,
        },
        envFromCfnOutputs: {
          // TODO: cfn outputs need to go here!
          // CcpUrlOutput: TestStage.CcpUrlOutput,
          // loginUrlOutput: TestStage.LoginUrlOutput,
          // regionOutput: TestStage.RegionOutput,
          // apiOutput: TestStage.ApiOutput
        },
        commands: [
          "cd $CODEBUILD_SRC_DIR/frontend",
          "pwd",
          "apt-get install jq -y",
          "chmod +x ./generate-config.sh",
          "npm i",
          "npm run build-prod",
          "pwd",
          "cat ./src/config-prod.json",
          "cd ../deployment",
          "npx cdk synth",
        ],
        primaryOutputDirectory: "$CODEBUILD_SRC_DIR/deployment/cdk.out", // $CODEBUILD_SRC_DIR = starts root path
      }),
    });

    /************ Initialize Test Stack & Add Stage************/
    const TestStage = new Stages(this, "TestStage", {
      env: { account: "***********", region: "us-east-1", stage: "test" },
    }); // Aspen Sandbox
    Pipeline.addStage(TestStage);

    /************ Initialize Prod Stack & Add Stage ************/
    const ProdStage = new Stages(this, "ProdStage", {
      env: { account: "***********", region: "us-east-1", stage: "prod" },
    }); // Aspen Sandbox
    Pipeline.addStage(ProdStage);

    /************ Build Pipeline ************/

    Pipeline.buildPipeline();

    /************ Manual Approve Stage ************/

    const ApproveStage = Pipeline.pipeline.addStage({
      stageName: "PromoteToProd",
      placement: {
        justAfter: Pipeline.pipeline.stage("TestStage"),
      },
    });

    ApproveStage.addAction(
      new cdk.aws_codepipeline_actions.ManualApprovalAction({
        actionName: "Approve",
        additionalInformation: "Approve this deployment for production.",
      })
    );
  }
  /****/
}