Unable to deploy a Remix App to Azure App service using Azure Pipelines

I have a remix app built using the Remix App Server template. I am trying to build it using Azure App Service. The issue is that "build" command generates a .cache folder and there are issues with permissioning only while copying that. The goal is to run "npm run start" after the build is deployed.

This is my yml.

# Node.js Express Web App to Linux on Azure
# Build a Node.js Express app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- development
variables:
# Azure Resource Manager connection created during pipeline creation
azureSubscription: <subscription_id>
# Web app name
webAppName: 'remix'
# Environment name
environmentName: 'remix-app'
# Agent VM image name
vmImageName: 'ubuntu-latest'
# PNPM Cache Location
pnpm_config_cache: $(Pipeline.Workspace)/.pnpm-store
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'
- task: Cache@2
inputs:
key: 'pnpm | "$(Agent.OS)" | pnpm-lock.yaml'
path: $(pnpm_config_cache)
displayName: Cache pnpm
- script: |
corepack enable
corepack prepare pnpm@latest-8 --activate
pnpm config set store-dir $(pnpm_config_cache)
displayName: "Setup pnpm"
- script: |
pnpm install
pnpm run build
displayName: 'pnpm install, build'
- 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: AzureWebApp@1
displayName: 'Azure Web App Deploy: remix'
inputs:
azureSubscription: $(azureSubscription)
appType: webAppLinux
appName: $(webAppName)
runtimeStack: 'NODE|18'
package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
startUpCommand: 'npm run start'

This is the error I get.

I cloned this repository I used Node.js React app with Azure Web app as remix works better with react.

Select your Web app and run the yaml pipeline:-

trigger:
- main

variables:

 
  azureSubscription: 'azuresubscription-id'

  # Web app name
  webAppName: 'siliconwebapp1'

  # Environment name
  environmentName: 'siliconwebapp1'

  # 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: siliconwebapp1'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              WebAppName: $(webAppName)
              packageForLinux: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              RuntimeStack: 'NODE|10.10'
              StartupCommand: 'npm run start'
              ScriptType: 'Inline Script'
              InlineScript: |
                npm install
                npm run build --if-present                

Above method does not include any cache task or copy files. But in your task you can add:-

- script: | 
    pnpm install 
    npm run build
    rm -rf .cache 
 displayName: 'pnpm install, build, and delete .cache folder'

To remove the cache files before archive task.

If you face any issues related to the dependencies make sure you update those packages via npm commands. First run the code locally with npm run setup and npm run dev command. If the app runs locally, Push the code in your Azure DevOps pipeline and run again.