Confusion on route priority in routes.js when using proxy

We have a Layer0 site that is still proxying routes from our legacy site.

On our legacy site, we have a directory /pages/* that contains content we want to incrementally migrate.

However, I cannot seem to match a new single route correctly in the Layer0 site. In the documentation it states:

When Layer0 receives a request, it executes each route that matches the request in the order in which they are declared until one sends a response.

So we have the legacy route, which is .get('/pages/:slug*', proxyOrigin) where proxyOrigin does return a response according to docs because it uses proxy

But the thing is, I cannot move this route to under .use(nuxtRoutes) ( which would return the .get route ) because Layer0 returns an error: Error: Routes cannot be added after the 'fallback' route as they would be unreachable. So it seems like it is treating .use(nuxtRoutes) as a fallback.

In @xdn/core we could use .use(nuxtRoutes) anywhere in the chain with no error, but upgrading to @layer0 package required it to be directly above .fallback() ( as far as I could tell ).

To show a full very basic example, here is what is not working for me:

routes.js

const { Router, CustomCacheKey } = require('@layer0/core/router');
const { renderNuxtPage, nuxtRoutes } = require('@layer0/nuxt');

const proxyOrigin = ({
  proxy,
  ...otherStuff
}) => {
  proxy('legacy');
};

const router = new Router()
    .get('/pages/single-page', ({ cache }) => cache(HTML)) // Route i want to return before proxy route
    .use(nuxtRoutes)     // ERROR, layer0 says this is fallback, but want to return the route here
    .get('/pages/:slug*', proxyOrigin)
    .fallback(res => {
      proxyOrigin(res);
    });

Is there a way to return a response in that first get to the Layer0 route I want? Maybe using redirect? Not sure…

Thank you for your help!

Using:
@layer0/core”: “^3.10.0”,
@layer0/nuxt”: “^3.10.0”,
@layer0/prefetch”: “^3.10.0”,

EDIT: In the nuxtRoutes middleware docs it says:

You can add additional routes before and after nuxtRoutes , for example to send some URLs to an alternate backend. This is useful for gradually replacing an existing site with a new Nuxt.js app.

This is not the case in my experience. Using nuxtRoutes anywhere immediately before .fallback() triggers an error.

NuxtRoutes does have an internal fallback which gets set and prevents any additional route handlers from being defined after it, except for using a .fallback(). This was changed in @xdn/core@2.40.x and also in @layer0/core. I believe the documentation is no longer accurate here. You should be able to do something like this:

const router = new Router()
    .get('/pages/single-page', ({ cache }) => cache(HTML)) // Route i want to return before proxy route
    .use(nuxtRoutes)     // ERROR, layer0 says this is fallback, but want to return the route here
    .fallback(res => {
      proxyOrigin(res);
    });

This was a bug which is now fixed in @layer0/core v3.16.0. You can now add routes of any kind after use(nuxtRoutes).

1 Like