.NET application deployed in Azure DevOps Pipeline shows 404 error

Question

I have an application with frontend in React js (Vite) and backend in .NET and Node and I am trying to setup a pipeline for the deployment.

My project structure is as below

`Project

• reactwithasp.client //Frontend Dir
• reactwithasp.server //Backend Dir
• .csproj
• .sln`

And my YAML file is as below:

trigger:
  branches:
    include:
      - Test  # Change this to the branch to trigger the pipeline on
 
pool:
  vmImage: 'windows-latest'  # Use a Windows agent for .NET solution
 
variables:
  buildConfiguration: 'Release'  # Change to 'Debug' if required
  PUBLISH_DIRECTORY: '$(Build.ArtifactStagingDirectory)'
 
steps:
 
 
  # Step 1: Checkout code from the repository
  - checkout: self
    displayName: 'Checkout Code'
 
  # Step 2: Install Node.js and dependencies for React client
  - script: |
      echo "NODE_ENV="
      npm install -g node@21.7.2 vite@5.4.10
      npm ci
    displayName: 'Install Node.js and Vite'
    workingDirectory: $(System.DefaultWorkingDirectory)/reactwithasp.client
 
  - task: NodeTool@0
    inputs:
      versionSource: 'spec'
      versionSpec: '21.x'
    displayName: 'Install Node.js'
  
  # Step 2: Verify Node version
  - script: |
      node -v
      npm -v
    displayName: 'Verify Node.js and npm Versions'
 
 
  - task: UseNode@1
    inputs:
      versionSpec: '21.x'
    displayName: 'Use Node.js 21'
 
  # Step 3: Use .NET Core SDK
  - task: UseDotNet@2
    inputs:
      packageType: 'sdk'
      version: '8.x'  # Adjust to match your project's .NET SDK version
    displayName: 'Install .NET SDK'
 
  # Step 4: Restore NuGet packages for .NET solution
  - task: NuGetCommand@2
    inputs:
      restoreSolution: '$(System.DefaultWorkingDirectory)/*.sln'
    displayName: 'Restore NuGet Packages'
 
  # Step 5: Install React dependencies
  - script: npm install
    displayName: 'Install React Dependencies'
    workingDirectory: $(System.DefaultWorkingDirectory)/reactwithasp.client
 
  # Step 6: Build the React client
  - script: npm run build
    displayName: 'Build React App'
    workingDirectory: $(System.DefaultWorkingDirectory)/reactwithasp.client
 
  # Step 7: Copy React client build output directly to publish directory
  - script: |
      cp -r $(System.DefaultWorkingDirectory)/reactwithasp.client/dist/* $(PUBLISH_DIRECTORY)
    displayName: 'Copy React Build to Publish Directory'
 
  # Step 8: Build the .NET solution
  - task: VSBuild@1
    inputs:
      solution: '$(System.DefaultWorkingDirectory)/*.sln'
      msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="$(PUBLISH_DIRECTORY)\\"'
      platform: 'Any CPU'
      configuration: '$(buildConfiguration)'
    displayName: 'Build .NET Solution'
 
  # Step 9: Publish .NET build artifacts
  - task: PublishBuildArtifacts@1
    inputs:
      pathtoPublish: '$(PUBLISH_DIRECTORY)'
      artifactName: 'dotnetBuild'
    displayName: 'Publish .NET Build Artifacts'
 
  # Step 10: Deploy to Azure Web App, pointing to wwwroot
  - task: AzureRmWebAppDeployment@4
    inputs:
      ConnectionType: 'AzureRM'
      azureSubscription: 'abc-PCS'
      appType: 'webApp'
      WebAppName: 'abcpcs'
      packageForLinux: '$(PUBLISH_DIRECTORY)/*.zip'  # Adjust if path or filename differs
    displayName: 'Deploy to Azure Web App'

Figured out, the build files are not getting copied to the wwwroot folder, hence the website shows 404 error.

My directory paths: System.DefaultWorkingDirectory: D:\a\1\s Build.ArtifactStagingDirectory: D:\a\1\a

Where as the wwwroot path is /c/home/site/wwwroot

Not able to find what the issue is and been stuck with this from days now. Please help.

Earlier there was issue with vite and it was throwing error 'vite' is not recognized as internal or external command and after installing vite it moved ahead one step.

Now I am getting below error:

Author       : Microsoft Corporation
Help         : https://docs.microsoft.com/azure/devops/pipelines/tasks/utility/command-line
==============================================================================
Generating script.
Script contents: shell
npm run build
========================== Starting Command Output ===========================
"C:\Windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "D:\a\_temp\9abfa463-0928-4d82-b16a-f525c9bc3fca.cmd""
 
> reactwithasp.client@0.0.0 build D:\a\1\s\reactwithasp.client
> vite build
 
D:\a\1\s\reactwithasp.client\node_modules\vite\bin\vite.js:2
import { performance } from 'node:perf_hooks'
       ^
 
SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactwithasp.client@0.0.0 build: `vite build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactwithasp.client@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\npm\cache\_logs\2024-10-31T19_00_52_549Z-debug.log
##[error]Cmd.exe exited with code '1'.
Finishing: Build React App

**UPDATE: even after trying HTTPS=false in vite.config.js and setting VITE_HTTPS=false in yaml.

Author       : Microsoft Corporation
Help         : https://docs.microsoft.com/azure/devops/pipelines/tasks/utility/command-line
==============================================================================
Generating script.
Script contents: shell
npm run build
========================== Starting Command Output ===========================
"C:\Windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "D:\a\_temp\fcbec466-9955-4d29-8573-5410e178f18c.cmd""
 
> reactwithasp.client@0.0.0 build
> vite build
 
There was an error exporting the HTTPS developer certificate to a file.
failed to load config from D:\a\1\s\reactwithasp.client\vite.config.js
error during build:
Error: Could not create certificate.
    at file:///D:/a/1/s/reactwithasp.client/vite.config.js.timestamp-1730747332612-efccc51bf23a2.mjs:27:11
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async loadConfigFromBundledFile (file:///D:/a/1/s/reactwithasp.client/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:68112:21)
    at async loadConfigFromFile (file:///D:/a/1/s/reactwithasp.client/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:67967:28)
    at async resolveConfig (file:///D:/a/1/s/reactwithasp.client/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:67579:28)
    at async build (file:///D:/a/1/s/reactwithasp.client/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:66729:20)
    at async CAC.<anonymous> (file:///D:/a/1/s/reactwithasp.client/node_modules/vite/dist/node/cli.js:842:9)
##[error]Cmd.exe exited with code '1'.
Finishing: Build React App with HTTPS Disabled

Answer 1

Sometimes, the application improperly looks for static files after publishing in the same path it was located during publishing.

To fix it I set the actual location in runtime (making sure that wwwroot is located properly in the publishing directory) like this:

var options = new WebApplicationOptions
{
  ContentRootPath = AppContext.BaseDirectory,  // Ensure the correct content root
  WebRootPath = Path.Combine(AppContext.BaseDirectory, "wwwroot")  // Set wwwroot dynamically
};

var builder = WebApplication.CreateBuilder(options);

Answer 2

Seems the information you provided files are being copied to PUBLISH_DIRECTORY which is pointing to "d:\a\1\a but you need to make sure that files are properly zipped and deployed to "~\wwwroot" directory

• Script: | cd $(PUBLISH_DIRECTORY) zip -r ../publish.zip DisplayName: "Zip create from published Directory"

Update the deployment task

'$(Build.ArtifactStagingDirectory)/publish.zip'

Ensuring your build outputs are zipped and copied correctly will hopefully solve your 404 issues. If Still exists then please check the logs again. Thanks