How do I deploy a Nuxt 3 project from Azure repos using Azure pipelines?

Repost from discussion

I've linked basically the same question. How do I deploy a Nuxt 3 app with DevOps pipelines? I've currently set up the following:

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSource: 'spec'
    versionSpec: '18.x'
    
- task: Npm@1
  inputs:
    command: 'install'
    workingDir: 'frontend'

- task: Npm@1
  inputs:
    command: 'custom'
    workingDir: 'frontend'
    customCommand: 'run build'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/frontend/.output'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/frontend-plantool.zip'
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

After that a release pipeline runs and deploys it to an App Service (should I use something else?). I can verify everything from the .output folder is present within the app service. The actual URL is empty however, it just displays the default message:

Your web app is running and waiting for your content

Am I doing something wrong? How can I start actually running the front end.

I've already tried following the Nuxt documentation or Microsoft tutorials. However they all point to connecting your GitHub repository. Unfortunately my repository is not on GitHub.

I've followed this tutorial to get what I have now.

I finally managed to get it working by doing the following:

Make sure you define azure as nitro preset in your nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    preset: "azure"
  }
})

I know the tutorials say this gets automatically detected but it doesn't. Also don't use azure-swa even though you're going to deploy to a Static Web App.

This should work with the pipeline Azure generates.

How to have Azure generate your pipeline

1. Create a Static Web App (you should be at this URL: https://portal.azure.com/#create/Microsoft.StaticApp)
2. Under Basics > Deployment Details, make sure you set Azure DevOps as your source and select your repository. (or if you use GitHub, it's probably the same thing)
3. Under Basics > Build Details, make sure you select Nuxt 3 as framework

This should be all that's necessary when your nuxt project is in the root of your repository.

How to fix the pipeline when Nuxt isn't in the root of your repository?

Figuring out this probably took most of my time. Make sure you have exactly this configuration:

  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: YOUR_TOKEN_HERE
# Point this to the root of your Nuxt application.
      app_location: "/frontend"
# Should also point to the root of your application first, before going to .output/server. 
# Even though the tooltip mentions something about a "relative" path.
      api_location: "frontend/.output/server" 
# Should NOT point to the root of your application first, point directly to .output/public.
# relative to your Nuxt root. Even though this tooltip doesn't mention anything about
# being relative. 
      output_location: ".output/public"

In this case the Nuxt project "root" is located in

main root/
|- frontend/ <--- NUXT PROJECT HERE
|--- package.json
|--- nuxt.config.ts
|--- App.vue
|--- etc.
|- backend/
|- etc.