How to write a pipline for Vite react app with azure devops and azure web app service

Question

How to deploy Vite React app to azure app service with specific slot name. I found some. examples but its for the github repository but mine its on Azure DevOps Any suggestions ?

I have tried my pipline as follow Basically my pipline is 2 stages. which will build then deploy the app to azure web app service

trigger:
  - QA

variables:
  azureSubscription: '{Connection}'
  slotName: 'qa'
  environmentName: 'QA'
  webAppName: '{appName}'
  vmImageName: 'ubuntu-latest'
  cacheKey: 'yarn | "$(Agent.OS)" | yarn.lock'

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

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

          - script: |
              yarn install
            displayName: 'yarn install'

          - task: Cache@2
            inputs:
              key: $(cacheKey)
              path: node_modules
              cacheHitVar: CACHE_RESTORED
            displayName: 'Cache yarn dependencies'

          - script: |
              yarn build
            displayName: 'yarn build'

          - task: ArchiveFiles@2
            displayName: 'Archive files'
            inputs:
              rootFolderOrFile: '$(System.DefaultWorkingDirectory)/dist'
              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'
                  inputs:
                    azureSubscription: $(azureSubscription)
                    appType: webAppLinux
                    WebAppName: $(webAppName)
                    SlotName: $(slotName)
                    packageForLinux: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
                    RuntimeStack: 'NODE|18-lts'
                    StartupCommand: 'pm2 serve /home/site/wwwroot/dist --no-daemon'

the build and deploy works but the app crash and not running

Answer 1

after searching I found the answer here is the working version of the pipline which can build and deploy react app created with Vite

trigger:

- main  # This assumes you want to trigger the pipeline on changes to the main branch. Modify as needed.

pool:
  vmImage: 'ubuntu-latest'  # Use the Ubuntu VM image

variables:
  appName: '{appName}'  # Name of your Azure Web App Service
  buildArtifactStagingDirectory: '$(Build.ArtifactStagingDirectory)'

stages:
  - stage: Build
    jobs:
      - job: BuildJob
        steps:
          - task: NodeTool@0  # Ensure Node.js is available on the agent
            inputs:
              versionSpec: '18.x'  # Use Node.js version 18.x (or adjust to your preferred version)
            displayName: 'Install Node.js'

          - script: |
              yarn  # Install dependencies
              yarn build  # Build the Vite project for production
            displayName: 'Build Vite React App'

          - task: CopyFiles@2  # Copy built files to staging directory
            inputs:
              sourceFolder: 'dist'  # Vite's default output folder. Adjust if you've customized the output directory.
              targetFolder: '$(buildArtifactStagingDirectory)'
            displayName: 'Copy Built Files to Staging Directory'

          - task: PublishBuildArtifacts@1  # Publish the built assets so they can be picked up by the deployment job
            inputs:
              pathToPublish: '$(buildArtifactStagingDirectory)'
              artifactName: 'drop'
            displayName: 'Publish Build Artifacts'

  - stage: Deploy
    jobs:
      - deployment: DeployJob
        environment: 'Production'  # Adjust if you have specific environments set up in Azure DevOps
        strategy:
          runOnce:
            deploy:
              steps:
                - task: AzureWebApp@1  # Deploy to Azure Web App
                  inputs:
                    azureSubscription: '{serviceConnection}'  # Your Azure subscription name or service connection name
                    appName: '$(appName)'
                    slotName: 'Production'  # The name of the deployment slot to deploy to
                    package: '$(Pipeline.Workspace)/drop'  # Path to the published artifacts
                  displayName: 'Deploy to Azure Web App Service'