React JS Azure DevOps Web app won't run but files are present in server and no errors in pipelines

Question

I am doing a simple Azure DevOps CICD deployment. I am following all the steps. First up, here is my YAML file. I have kept the comments as it is, just in case, I am making more mistakes than I am aware of.

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'


# Set variables
variables:
  directory: ReactJSRecipeApp


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

- script: 
    npm install
  displayName: 'npm install'

- script:
    npm run build
  displayName: 'npm build'  

- task: CopyFiles@2
  displayName: 'Copy files'
  inputs:
    sourceFolder: 'build' 
    Contents: '**/*'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'
    cleanTargetFolder: true


- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true    


- task: PublishBuildArtifacts@1
  displayName: 'Publish Build Artifacts'
  inputs: 
    pathtoPublish: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    ArtifactName: 'www' # output artifact named www


- task: AzureWebApp@1
  displayName: 'Deploy to App Service'
  inputs:
    azureSubscription: 'ReactJSRecipeAppConnection'
    appName: 'reactjsrecipeappwebapp2'
    appType: 'webApp'
    package: '$(System.ArtifactsDirectory)/$(Build.BuildId).zip'
    customWebConfig: '-Handler iisnode -NodeStartFile server.js -appType node' 

So, when I run this, I get no errors in the Pipeline.

Further, I want to point out the following.

• If I download the artifacts zip folder, I am able to run that folder locally and get my react app running in a localhost server just fine.
• I check my Azure web app via Kudo Tools, I see all the files inside wwwroot, with timestamps that match the zip file from the artifact folder. So, I am assuming that the files are indeed getting pushed and to the correct spot in the web server.
• Before I run the CICD trigger, these azure web apps were created brand new, and I get the standard azure welcome/landing page. So, the web apps themselves are fine.

After all this, the website itself does not serve the pages. I get a 404. I have tried two different web apps on Azure but the same results.

Any advise, where I am going wrong?

Update 1

I decided to manually check the files on Filezilla. But, its empty!!!

But, KUDO shows files. I dont understand!

Update 2

So, I did a direct deploy from visual studio code with the artifact publish folder. the web app runs fine. So, did this step to make sure that the web app is configured correctly.

Answer 1

Below YAML worked for me while deployed using Azure DevOps pipeline.

trigger:
- none

parameters:
# Service Connection details
- name: ServiceConnection
  type: string
  default: <Service Connection Name>
  displayName: Service Connection

# React Web App Name
- name: WebAppName
  type: string
  default: <Web App Name>
  displayName: React Web App Name
  
variables:
  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: '${{ parameters.ServiceConnection }}'
  # Web app name
  webAppName: '${{ parameters.WebAppName }}'
  # React build directory
  buildDirectory: 'build'

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

- script: |
    cd <Folder path where package.json is present> # <- Optional command. Remove it if everything is in root folder itself.
    npm install
    npm run build --if-present
  displayName: 'npm install and build'

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/<Folder path where package.json is present else remove this section>/$(buildDirectory)'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact'
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    artifactName: 'drop'
    publishLocation: 'Container'

- task: DownloadPipelineArtifact@2
  displayName: 'Download Pipeline Artifact'
  inputs:
    buildType: 'current'
    artifactName: 'drop'
    targetPath: '$(Pipeline.Workspace)'

- task: AzureWebApp@1
  displayName: 'Azure Web App Deploy: $(webAppName)'
  inputs:
    azureSubscription: $(azureSubscription)
    appType: 'webApp'
    appName: $(webAppName)
    package: '$(Pipeline.Workspace)/$(Build.BuildId).zip'

Answer 2

Alright, so, it looks like my YAML file was not correct. I finally got it to work.

I am posting it here if someone comes around looking for a ready to use React YAML file (because the Azure DevOps Documentation is not that useful in its current form)

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

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

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

- task: CopyFiles@2
  inputs:
    Contents: 'build/**' # Pull the build directory (React)
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

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

# Default value: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)/build/'
    includeRootFolder: false

- task: AzureWebApp@1
  inputs:
    azureSubscription: 'ReactJSRecipeAppConnection'
    appName: 'ReactJSRecipeApp4'
    package: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'

The full repository with simple react code including the YAML is here.

https://github.com/Jay-study-nildana/ReactJSRecipeApp