Deploy frontend app from Azure Devops to Azure AppService

Question

I got Azure Devops with connection to Azure cloud.

I got frontend repo created with React app. Locally app works on localhost:3000 and to run it I use the commands below:-

npm install
npm run build
npm start

I created pipeline that build app and then release it to AppService. AppService is based on Linux OS with Runtime Stack node. Artifacts to deploy are content from "build" catalog After deploy I received this error:-

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path //package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '//package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

What is wrong?"build folder doesn't have package.json" which is located one level above in catalog but I saw that I should build folder before deploy.

Answer 1

Refer this SO thread answer by Walter to resolve the error.

Make sure the node version you are selecting while running your yaml script matches the Node version of your Web app.

My yaml script to deploy react sampleapp:-

trigger:
- master

variables:

    azureSubscription: 'xxxxxxxxxxxx'

  # Web app name   webAppName: 'xxxxwebapp655'

  # Environment name   environmentName: 'xxxxwebapp655'

  # Agent VM image name   vmImageName: 'ubuntu-latest'

stages:
- stage: Build   displayName: Build stage   jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

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

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy   displayName: Deploy stage   dependsOn: Build   condition: succeeded()   jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool:
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureRmWebAppDeployment@4
            displayName: 'Azure App Service Deploy: siliconwebapp655'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              WebAppName: $(webAppName)
              packageForLinux: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              RuntimeStack: 'NODE|18.10'
              StartupCommand: 'npm run start'
              ScriptType: 'Inline Script'
              InlineScript: |
                npm install
                npm run build --if-present
                 ```

My Azure react repository:-

Also, refer my SO thread answer to deploy react app with Azure devops in your Azure web app