Search code examples
azure-devopsazure-pipelines

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

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!!!

enter image description here

But, KUDO shows files. I dont understand!

enter image description here

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.

Solution

  • 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