AWS CodePipeline BuildAction not detecting buildspec.yml secondary artifacts

Question

I'm trying to use secondary artifacts to separate the files from the web page from the cdk generated Stack files. but the BuildAction from the pipelines is not detecting the secondary artifacts that separate the web files from the Stack files.

I've tried following the recomendations on the AWS docs relating to buildspec.yml as well as multiple sources and multiple outputs, but can't get it to work.

here's my cdk code for the build action.

const buildStage = pipeline.addStage({ stageName: 'Build'});
        const buildOutputWeb = new Artifact("webapp")
        const buildOutputTemplates = new Artifact("template")
        const project = new PipelineProject(this, 'Wavelength_build', {
            environment: {
                buildImage: LinuxBuildImage.STANDARD_3_0
            },
            projectName: 'WebBuild'
        });

        buildStage.addAction(new CodeBuildAction({
            actionName: 'Build',
            project,
            input: sourceOutput,
            outputs: [buildOutputWeb, buildOutputTemplates]
        }));

here's the section relating to the Build Action from the generated stack file

{
            "Actions": [
              {
                "ActionTypeId": {
                  "Category": "Build",
                  "Owner": "AWS",
                  "Provider": "CodeBuild",
                  "Version": "1"
                },
                "Configuration": {
                  "ProjectName": {
                    "Ref": "Wavelengthbuild7D63C781"
                  }
                },
                "InputArtifacts": [
                  {
                    "Name": "SourceOutput"
                  }
                ],
                "Name": "Build",
                "OutputArtifacts": [
                  {
                    "Name": "webapp"
                  },
                  {
                    "Name": "template"
                  }
                ],
                "RoleArn": {
                  "Fn::GetAtt": [
                    "WavelengthPipelineBuildCodePipelineActionRoleC08CF8E2",
                    "Arn"
                  ]
                },
                "RunOrder": 1
              }
            ],
            "Name": "Build"
          },

And here is my buildspec.yml

version: 0.2
env:
  variables:
    S3_BUCKET: "wavelenght-web.ronin-ddd-dev-web.net"
phases:
  install:
    runtime-versions:
      nodejs: 10
  pre_build:
    commands:
      - echo Installing source NPM dependencies...
      - npm install -g @angular/cli
      - npm install typescript -g
      - npm install -D lerna
  build:
    commands:
      - echo Build started on `date`
      - npm run release
      - cd $CODEBUILD_SRC_DIR
  post_build:
     commands:
      - echo Build completed on `date`
artifacts:
  files:
    - '**/*'
  secondary-artifacts:
    artifact1:
      base-directory: $CODEBUILD_SRC_DIR
      files:
        - 'packages/website/dist/**/*'
      name: webapp
      discard-paths: yes
    artifact2:
      base-directory: $CODEBUILD_SRC_DIR
      files:
        - '*/WavelengthAppStack.template.json'
      name: template
      discard-paths: yes
    

Answer 1

I figured out the problem. turns out that the name attribute in the secondary artifacts doesn't change the identifier. my buildspec.yml artifacts now look like this.

artifacts:
  secondary-artifacts:
    webapp:
      base-directory: packages/website/dist
      files:
        - '**/*'
      name: webapp
    template:
      base-directory: packages/infrastructure/cdk.out
      files:
        - 'WavelengthAppStack.template.json'
      name: template

notice that now instead of artifact1: and then all data for that artifact it is webapp: and then all the data.