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

(edited)

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! https://community.vercel.com/t/debugging-404-errors/437

Vercel Community

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are...

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.

https://community.vercel.com/t/debugging-404-errors/437

Vercel Community

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are...

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

Vercel Staff

Hi , 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: https://github.com/CyJackX/Arguepedia2

GitHub

GitHub - CyJackX/Arguepedia2

Contribute to CyJackX/Arguepedia2 development by creating an account on GitHub.

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.

https://quasar.dev/quasar-cli-vite/developing-ssr/introduction 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: https://github.com/dongwa/vercel-quasar?tab=readme-ov-file

Vercel Staff

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

I found that this is the documentation Quasar has for serverless SSR: https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver#serverless. 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 https://github.com/quasarframework/quasar/discussions/15744#discussioncomment-5860484, 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.

Vercel Staff

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 is closed. It no longer accepts new replies.

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

Hey Anshuman, sure. I'll make my repo public and share: https://github.com/CyJackX/Arguepedia2

GitHub

GitHub - CyJackX/Arguepedia2

Contribute to CyJackX/Arguepedia2 development by creating an account on GitHub.

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

https://quasar.dev/quasar-cli-vite/developing-ssr/introduction 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: https://github.com/dongwa/vercel-quasar?tab=readme-ov-file