Dynamic routes on Azure Static Web Apps have stopped functioning since Nuxt 3.5.0 or later.

[lt-tim]

Environment

Operating System: Windows_NT Node Version: v18.16.0 Nuxt Version: 3.4.0 Nitro Version: 2.6.3 Package Manager: [email protected] Builder: vite User Config: devtools Runtime Modules: - Build Modules: -

Reproduction

https://github.com/lt-tim/nuxt-asw-issue

This repository contains 2 nuxt projects, both are the same with the only difference being the nuxt version (labeled by their version)

Describe the bug

Since Nuxt version 3.5.0 (we've pinpointed this version), dynamic routes have ceased to function correctly on Azure Static Web Apps. When attempting to access a dynamic route, users are being redirected back to its associated index page. For instance:

/index/{id} → /index/ And so on... Steps to Reproduce:

Before attempting to reproduce this issue, please make sure to install the swa-cli first.

Clone the repository from https://github.com/lt-tim/nuxt-asw-issue.

Navigate to the version you wish to test, either Nuxt 3.4.0 or the latest release (3.7.1).

Build the Nuxt app using the command: swa build.

Deploy the built Nuxt app using the following command, replacing [ENV] and [DEPLOYMENT_TOKEN] with your specific environment and deployment token, respectively: 4. Deploy the build nuxt app using swa deploy --env **[ENV]** --deployment-token **[DEPLOYMENT_TOKEN]** --verbose silly

Reproduction Outcome:

Upon testing the links on the site, you will notice that everything functions as expected in Nuxt version 3.4.0. However, dynamic links fail to work as intended in the latest version of Nuxt.

Your attention to this matter would be greatly appreciated in order to resolve this issue.

Additional context

No response

Logs

No response

[lt-tim]

Any updates on this?

[lt-tim]

bump

[CalebKester]

Still unfixed as of Nuxt 3.10. Stuck upgrading my site until this gets resolved :(

[TheAlexLichter]

@danielroe as you worked with ASW recently, did you hit that issue too?

[lt-tim]

can confirm that its still not solved. :)

[danielroe]

I had no issues deploying SWA with dynamic routes. I can take a look but wonder if the issue is the cli syntax being used as opposed to the GitHub action.

[chrisisagile]

Is there an update on this issue? I am hitting it too

[DanRoddis]

I'm encountering an issue when deploying via CLI and Azure Devops tasks using nuxt build and nuxt generate. When using the index.html fallback, the route.params or route.path appear to be empty, as if the fallback is triggered and the parameters are lost. In my case, I'm utilising a catch-all page-based route.

It appears like the routes need to be physically on the filesystem to be deployed for them to work correctly, but for a preview environment they can't be published ahead of time and must be dynamic.

I've successfully deployed other projects on SWA recently without any problems, basically just handling resource IDs in the URL and that has been fine, it seems to be more of an issue with static site generation where some routes should be dynamic.

I'll investigate further to identify the key difference causing this issue and provide an update, but there seems to be something unusual happening.

[czzplnm]

Seems like a pretty big issue, I'm hitting it too, can this get attention?

[chrisisagile]

Unfortunately, I just decided not to use the tech stack as it doesn't work and required to much hacking to fix when compared with all the other options available.

[danielroe]

Please provide a reproduction if so. I have apps happily running without this issue

[chrisisagile]

Honestly, it wasn't really worth my time so I moved on.

[czzplnm]

Please provide a reproduction if so. I have apps happily running without this issue

Is there a place to see example Nuxt projects configured with Azure? Preferably ones also using PNPM to build, maybe the mistake is my configuration.

[danielroe]

Here is one: https://github.com/danielroe/page-speed.dev

[CalebKester]

Sorry I never followed up here. Trying to remember but I think this got fixed (or I realized I was doing something wrong with it). My site has been up since April and working just fine on Nuxt and azure. It's for my company so repo isn't visible but I can confirm it's working.

[czzplnm]

Here is one: https://github.com/danielroe/page-speed.dev

I've pin pointed my issue to using a pnpm workspace and not setting the path directories properly:

Static & Dynamic routes are working perfectly

app_location: / # App source code path api_location: /app/.output/server # Api source code path - optional output_location: /app/.output/public # Built app content directory - optional

[danielroe]

Great! Is there something we can add to the docs to help in this situation?

[czzplnm]

Great! Is there something we can add to the docs to help in this situation?

Could be helpful. I was able to get it to work manually configuring the 'azure' preset on nitro and a few other changes but Dynamic routes did not work, quite the rabbit hole.

Would be helpful if the logs generated were very explicit when parsing route paths, etc.

Some of the generated github action paths had '/app' already too which confused me because my project has '/app' too. So a working output was '/app/app/.output' etc.

[DanRoddis]

Dynamic routes fail when files don't physically exist on the filesystem, at least when using Nuxt.

The route.path is redirected to the SPA's index, treating these as requests to the entry asset. This redirection, occurring at the route level, prevents dynamic routing from working without physical files at the same depth. The issue is reproducible both in Azure Static Web Apps and Docker containers, suggesting it's not Azure-specific.

The rewrite can deliver index.html on a child route e.g. /test/page/1 and yet route.path and window.location.pathname are both / because it's like the URL is being replaced rather than being caught.

I'll put together a minimal reproduction and update.

[DanRoddis]

While trying to reproduce this issue, I noticed that: The problem only occurs when SSR (Server-Side Rendering) is set to true in Nuxt. This setting seems to prevent dynamic routes from functioning correctly in any static deployment environment. When SSR is turned off, the dynamic routes work as expected.

I'm uncertain about the exact boundary between Nuxt and Nitro in this context, which makes it difficult to determine if this is a bug or expected behavior.

My use case is having site statically generated for SEO but parts of it still supporting fully dynamic routing.

Steps to reproduce:

Set up a Nuxt project with dynamic routes e.g. a catch all [...slug].vue route Enable SSR (set ssr: true in the Nuxt configuration) Run a nuxt generate Deploy to a static web host e.g. AzureStaticWebApps with the Azure preset Attempt to navigate to dynamic routes that haven't been pre-generated (no index.html exists)

Expected behavior: Dynamic routes should work correctly with SSR enabled, even if the physical routing files have not been generated. Actual behavior: Dynamic routes fail to function properly when SSR is enabled. Additional information:

The issue is resolved by disabling SSR (ssr: false) although then you do not have pregenerated pages for SEO purposes.

Given this It's unclear to me whether this is a problem within Nitro, my configuration or expected behaviour?

[pi0]

Added basic SWA to nitro-deploys. link. Basic dynamic paths seems working fine.