Confusion on route priority in routes.js when using proxy

Issues
1

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.

2

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);
    });
3

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