Issue running Nuxt3 app in Azure Web App slot

Question

With Nuxt2 I've had no issues deploying or running apps on Azure App Service, but found that I'm having trouble with Nuxt3. All the docs I've read on Nuxt3 mention Azure Static Web Apps but nothing about Azure Web Apps. I have no issues deploying to my development slot though receive this message when navigating to the app url:

You do not have permission to view this directory or page.

Monitoring the application logs doesn't show anything. I'm sure this is something to do with my app setup/config though I can't make heads or tails of it.

1. How would the backend config of a Nuxt3 app deployed to an Azure Web App differ from the config for an Azure Static Web App documented here?

Answer 1

I tried deploying Nuxt Starter App from this MS Document in my Azure Web app instead of Azure static app and it was successful, Refer below:-

My Azure Web App:-

OS:- Linux

Runtime Stack - Node-18-lts

Output:-

Added start up command in the Azure Web App > Configuration > General Setting to start the Nuxt app in Azure Web app correctly:-

npm run dev -- -o

The Nuxt app loaded successfully like below:-

The Permission error occurs for Azure Web app Windows OS, As the NuxtJs app causes some error while loading:-

Make sure to add the start command in the package.json like below before deploying in Windows OS Azure Web app:-

{
  "name": "nuxt-3-starter",
  "version": "1.0.0",
  "description": "My Nuxt 3 Test",
  "author": "Nuzhat Minhaz",
  "private": true,
  "scripts": {
    "start": "npm run dev -- -o",
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.6"
  }
}

I'd recommend using Linux based Azure Web app for the nuxtjs deployment like above.