Azure-devops-docs: The React Documentation Does Not Publish Anything

[m-sterspace]

The React documentation does not seem to work. When you run the task as presented it will say that there's nothing in the artifacts staging directory, because you never copy the build folder to the staging area. I have no idea where it builds to and can't find the produced build folder anywhere.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 86b2fdca-9125-9720-3d03-3c6dd336f100
• Version Independent ID: b2a24e28-9858-fe1c-4527-745f1f387e4e
• Content: Build and deploy JavaScript and Node.js apps - Azure Pipelines
• Content Source: docs/pipelines/ecosystems/javascript.md
• Product: devops
• Technology: devops-cicd
• GitHub Login: @juliakm
• Microsoft Alias: jukullam

[WilliamAntonRohm]

@m-sterspace -- Jason, thank you for your feedback. You may find answers here:

• Azure DevOps Support Bot
• Azure DevOps on Stack Overflow

@juliakm -- Julia, please look into this issue.

[juliakm]

@m-sterspace You might find this section on React and Vue helpful. The sample YAML creates a build artifact with PublishBuildArtifacts@1.

Were you using the Node.js with React template?

[m-sterspace]

Hi @juliakm , that is the section I was looking at and my yaml looks very similar to it. I'm pretty sure if you run that yaml file though it won't actually publish anything.

As far as I can tell, with pipelines the general pattern is that you have to copy artifacts to the artifact staging area, and then publish them with the publish task, however, in that yaml snippet I don't believe there's anything that would copy your build folder to the artifact staging area.

- script: | npm install npm run build displayName: 'npm install and build'

- task: PublishBuildArtifacts@1 inputs: pathtoPublish: $(build.artifactstagingdirectory) # dist or build files

I believe 'npm run build' should create a folder called 'build' within the repository, then their should be a task to copy that build folder to the artifact staging area, then the publish task will publish those artifacts. However the yaml seems to missing the middle copying step, and when I tried to add it, I couldn't find the build folder anywhere which seems strange...

(For the record and anyone else who gets stuck, as a workaround, I was able to create a pipeline using the classic editor that worked properly, but I'd rather be using yaml)

[juliakm]

@m-sterspace Thank you for the detailed explanation! It looks like the problem is that we need to add a CopyFiles@2 task to the YAML before PublishBuildArtifacts@1. An update will be on the site shortly.

[xtianus79]

@juliakm it still doesn't make sense. Something is breaking with the artifacts

[juliakm]

@xtianus79 I think the problem is that the path for contents in CopyFiles@2 is incorrect. It should be build/** or something similar.

Here's what is working for me. First, I created a basic react app using create-react-app (docs). You can clone my repo here. This just uses the basic app generated with create-react-app.

Then, I updated my YAML. Here is my working YAML. The pipeline grabs the contents of the build directory and creates a new artifact named www.

trigger:
- none

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm init react-app my-app
    npm run build
  displayName: 'npm install and build'

- task: CopyFiles@2
  inputs:
    Contents: 'build/**' ## update to match what you want to copy
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- script: echo $(Build.StagingDirectory) ## output staging directory
- powershell: dir ## output contents of root directory
- powershell: Get-ChildItem -Path build -Recurse -Force ## verify there are contents in build

- task: PublishBuildArtifacts@1
  inputs: 
    pathtoPublish: '$(Build.ArtifactStagingDirectory)' # dist or build files
    ArtifactName: 'www'

I'll update the docs to make the path clearer. Please let me know if this doesn't fix your issue.