Transitioning Quasar from SPA to SSR and 404ing. Tips on deployment?

Hey all, building out a Quasar app using SPA, and deploying to Vercel was pretty simple.
However, now that I’m trying to transition it into an SSR app (I want to protect all the endpoints behind middleware) I am having trouble getting the deployment working. It’s giving the 404 error. It seems the build completes just fine?

Right now the framework settings I’m using are
Output Director: dist/ssr
Development Command: quasar dev -m ssr --port $PORT

I was trying some vercel.json config builds but really wasn’t sure how to do it, and Cursor was sending me in circles.

I’m sure this might be something basic but I’m finding very little information online about similar problems; just a few people with similar trouble getting SSR working.

Update: Following the tagged Express-related docs since Express is what Quasar uses for SSR, I have at least gotten my deployment pointing at the plain-text of my minified index page; now I have to figure out how to get it running! Debugging 404 Errors
Adding /api/index.js and pointing it using the rewrites got me here thus far.

Update2: I saw some advice on changing the SSRListen to return a handler for serverless and requiring serverless-http:

export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
  if (process.env.DEV) {
    return (devHttpsApp || app).listen(port);
  }
  // Vercel uses this
  return { handler: serverless(app) };
});

Now I am getting to 504 Gateway_TimeOut, where This Serverless Function has timed out but your connection is working correctly.

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

Hi @cyjackx, welcome to the Vercel Community!

I’m new to Quasar. Can you share the docs you are following so I can understand the process better?

Can you also share your public repo or a minimal reproducible example. That will let us all work together from the same code to figure out what’s going wrong.

Hey Anshuman, sure. I’ll make my repo public and share: GitHub - CyJackX/Arguepedia2

It works locally if I run: quasar dev -m ssr
It worked deployed to Vercel in SPA mode.

Nearly all of it is still in SPA with the server-calls client-side, I’m doing this so that I can learn how to make this SSR, and I figure working with it deployed will show me whether I’m getting it right or not. Right now besides the basic middleware I have a hello world middleware with a button on the index page that tests if the server call works.

What is SSR | Quasar Framework is the Quasar internal docs
If I recall, it has Express in the middleare, which is why the express-related Vercel docs were helpful.

Thank you for looking into it, Anshuman, I appreciate it. It does seem I’ve gotten as far as getting the serverless function recognized, but there must be some other error on my end.

This person supposedly had it figured out, but cloning their repo and seeing if I could implement their solution did not work for me: GitHub - dongwa/vercel-quasar: deploy quasar with ssr mode in vercel

Hi @cyjackx, sorry for the delayed response. Were you able to solve this one?

I found that this is the documentation Quasar has for serverless SSR: SSR Webserver | Quasar Framework. But they don’t seem to have a particular documentation for Vercel or any official adapter for Vercel serverless environments.

Your point about Express is correct, the build output for Quasar is like any other express app but Vercel expects the serverless fucntions in api/* directory. I found this GitHub discussion about Vercel+Quasar Does any guide for SSR hosting on things like Netlify/Vercel exists? · quasarframework/quasar · Discussion #15744 · GitHub, which further confirms their lack of support for serverless (or should I say slight discouragement for serverless).

Hey Anshuman, I was not able to figure it out the way I was going with it. Ultimately I have begun porting it to Nuxt which appears much better supported.

1 Like

Thanks for sharing that. It’s always better to use tech that’s well documented and backed by a big community.

Looking forward to see more of you in the community!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.