Align Vite dev server and deployed API behaviour

[Juulsgaard]

Which scope/s are relevant/related to the feature request?

vite-plugin-nitro

Information

I am currently facing an issue where Analog acts very different running locally as opposed to when deployed.

My main issue stems from the way the Vite dev server is set up, since that setup seems to be affecting the deployed setup as well.
All API routes are actually routed from root (and not from /api. This is not an issue with the dev server since it's hosted on the /api route which means it all evens out. However, once I deploy the analog app to prod all the API routes are now accessible from the root as well as /api.

For example, if I define a handler in server/routes/hello-world.get.ts then testing locally the endpoint is accessible at /api/hello-world. But when I deploy to prod the endpoint now lives on both /api/hello-world and '/hello-world` which now threatens to overlap with any non pre rendered routes in my app.

Is there any way to reconfigure the Vite dev server setup so as to get rid of this workaround with root endpoints and middleware? If not, could it maybe be possible to modify the deployment for production (or even just exposing a boolean option) so it doesn't serve API endpoints from the root?

Another related issue, and the reason I came across this behaviour, is that any route based Nitro configuration works incorrectly when testing locally, since any routeRules aren't applied outside the /api routes. They are also not functioning the same locally as deployed, because of the prefix issue. A routeRule targeting /data.json would affect /api/data.json locally, but would affect /data.json when deployed.

Describe any alternatives/workarounds you're currently using

I still haven't figured out a successful workaround, but I am currently playing around with conditionally overwriting the #ANALOG_API_MIDDLEWARE value with a different middleware.

I plan to move all eventHandlers from the routes folder to the api folder. Then I just need to figure out how to get it working locally, but for now a workaround there could be to use env vars to target /${apiPrefix}/api locally, and then just /api on prod.

I'd be happy to hear if anyone else has come up with a better way to fix root API endpoints when deployed.

I still have no way to do a workaround on routeRules not being applied properly locally since Nitro only runs on /api. For now I will just test that functionality separately without the Vite dev server.

I would be willing to submit a PR to fix this issue

• Yes
• No

[Juulsgaard]

For those curious, this was the final workaround i came up with:

analog({
  [...],
  nitro: {
    apiBaseURL: command === 'serve' ? '/' : '/api',
    virtual: {
      '#ANALOG_API_MIDDLEWARE': `
import { eventHandler } from 'h3';
export default eventHandler((event) => { });`
    }
  }
})

I also moved all my API handlers from /server/routes to /server/api.

The solution works by using the auto api prefix in Nitro.

First i remove the existing workaround in Analog by nullifying the proxy middleware. This is done by replacing #ANALOG_API_MIDDLEWARE with empty middleware.

After that I just need to make sure that API routes live at /api when deployed, and live at / locally (since vite prefixes /api). By changing the apiBaseURL I can change where the API handlers are served, and so I just set it to / when serving, and to /api when building.

So far I haven't come across any issues with this approach.

I do however realise that in terms of using this fix as part of Analog, having to move handlers to /server/api is a breaking change for consumers.

[brandonroberts]

Thanks @Juulsgaard. Its something we can look at for V2, but yes the behaviours should be closer together