Behavior when deploying a project created with NUXT3 to azure static web apps

Question

I am trying to deploy an application created with NUXT3 to static web apps at the following URL

https://xxxxx.azurestaticapps.net/example/.

To do so, I have rewritten nuxt.config.ts as shown below.

#nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    ssr: false,
    target: 'static',
    app: {
        baseURL: '/example/',
    },
})

The Azure DevOps Pipeline for deploying Nuxt3 applications to Static Web Apps is shown below.

#Azure DevOps Pipeline
trigger: none
jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  pool:
    vmImage: ubuntu-latest
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN)
      app_location: "/myapp" # App source code path
      api_location: ".output/server" # Api source code path - optional
      output_location: ".output/public" # Built app content directory - optional
      config_file_location: "/example"

staticwebapp.config.json is as follows.

#staticwebapp.config.json
{
    "trailingSlash": "auto",
    "navigationFallback": {
      "rewrite": "index.html"
    },
    "routes": [
        {
          "route": "/index.html",
          "redirect": "/example/"
        }
    ]
}

Current Status,

The page is displayed in locale at

http://localhost:3000/example/

However, after deploying to Static Web Apps, the page is not displayed when accessed at the following URL

https://xxxxx.azurestaticapps.net/example

Therefore, I would like to know the following.

Does azure static web apps itself have a problem with not being able to display the screen when trying to display it with SPA? (Or does azure static web apps not support SPA?)

If not, what is wrong with the file?

【Tip】

・Static Web Apps works fine in SSR mode.

・The azure static web apps plan used: Free

Answer 1

@Tojima, Fuminori , Firstly, apologies for the delay from over the weekend and any inconvenience with this issue.

From the issue description, I understand you have reviewed all the config, but accessing the webapp, the page is not displayed.

Regarding your issue, it seems that the issue is with the routing configuration. If you haven’t done this already, you may updating  the staticwebapp.config.json file to include the correct routes for your application.

You may try updating the routes array in the staticwebapp.config.json file to include the following route:

{
  "route": "/example/*",
  "serve": "/example/index.html",
  "statusCode": 200
}

This should ensure that all requests to URLs starting with /example/ are served the index.html file in the /example/ directory of your application.

Also, just to ensure, that the app_location in the Azure DevOps Pipeline is set to the correct path of your application.

If the issue still persists, to fetch more details - Troubleshooting deployment and runtime errors

To isolate the issue further, kindly review these docs:

• You may checkout the doc FAQ and configuration of frameworks: What frontend frameworks can be automatically built by Static Web Apps?
• • Configure front-end frameworks and libraries with Azure Static Web Apps
• Deploy Nuxt 3 sites with universal rendering on Azure Static Web Apps Kindly let us know how it goes, I'll follow-up with you further.