Does any guide for SSR hosting on things like Netlify/Vercel exists?

[alihardan]

Hello, and many thanks to all those who worked on this framework.

I planned to add a small server-side operation to my SPA dashboard. It was easy thanks to express middleware, I can write custom APIs for what I need. But when I tried to deploy it into Vercel, after hours of trying and searching, I did not succeed in hosting SSR mode at Vercel, while Vercel definitely supports this feature due to the existence of Serverless Functions and Edge Functions in their documents.

Integrating Quasar SSR + Vercel Serverless functions is not easy and there is no guide or explanation at all. The only thing I find was #13522, which didn't work for me.

Netlify also supports serverless functions but I didn't succeed to make it work with Quasar SSR.

I understand that this is free software and I have not contributed to it yet. This is just a suggestion, that if dear developers consider it appropriate to include more explanations for this issue. and I would be happy if someone could tell me why it has not been considered yet. I would also be happy if someone could provide some resources for learning how to deploy these projects plus SSR enabled on Netlify/Vercel.

Thanks.

[mpont91]

Hi @alihardan,
I'm on the same page as you. I have a side project which I deployed successfully with SPA mode on Vercel, but I wanted to do it with SSR.
I think Quasar works fine because it only needs to run the command npm run build -m ssr and it generates successfully the folder dist/ssr. And of course if you run node index.js inside this folder runs the application.

So the main problem is the Vercel configuration. I started with this:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "npm run build",
  "outputDirectory": "dist/ssr"
}

And it actually works fine, but when you browse the page, it shows the javascript code instead of executing...

So I think now it has to be converted in a serverless function.
I tried adding this:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "npm run build",
  "outputDirectory": "dist/ssr",
  "functions": {
    "index.js": {
      "memory": 1024
    }
  }
}

But it doesn't find this file... the vercel error is:

Error: The pattern "index.js" defined in functions doesn't match any Serverless Functions inside the api directory.

Seems that it tries to find the files inside api folder, and I don't know how to change this... seems impossible.

My workaround was creating the api folder with a file inside, let's name it as app.js just loading the index file:

require('../dist/ssr/index')

And then the vercel.json is:

  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "npm run build",
  "outputDirectory": "dist/ssr",
  "functions": {
    "api/app.js": {
      "memory": 1024
    }
  }
}

now... it almost works...

no errors found when building and deploying.

But when I browse the website it still shows the javascript code, but if I access to /api/app.js it tries to show the website but it's blank with this console error:

caught ReferenceError: exports is not defined
    at index.5740d132.js:3:23

In addition to avoid the blank page when browsing the home website I tried to do a rewrite with this:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "npm run build",
  "outputDirectory": "dist/ssr",
  "functions": {
    "api/app.js": {
      "memory": 1024
    }
  },
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "api/app.js"
    }
  ]
}

But not working. Just showing the javascript code.

So I'm here without ideas... if anyone can help us, I'm a bit tired of this 😫

[TobyMosque]

just replace quasar by express on google: "netlify express", "vercel express", etc

Regarding netlify, u would run as a serverless function:
https://www.netlify.com/blog/2018/09/13/how-to-run-express.js-apps-with-netlify-functions/#express-via-serverless-http

The same to vercel:
https://vercel.com/guides/using-express-with-vercel#standalone-express

Now, the quasar part of the puzzle:
webpack: https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-production-export#example-serverless-http
vite: https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver#example-serverless-http

[mpont91]

Hi @TobyMosque
Thanks for your reply. But honestly don't understand yet. I've read these articles tones of times and I don't get what I have to do, I'm sorry.

I mean, Quasar already uses Express. After the Quasar build, it already generates the src-ssr and dist/ssr/ folders.
I've already have the file src-ssr/server.js which it was auto generated and it uses express. So I think it's no needed to change.

And then using this src-ssr folder it generates the production files in dist/ssr, the file which it has to be executed by node, in dist/ssr/index.js.

But why Vercel does not execute it, it just displays it.

Why I have to do more things? The file is already generated and seems it all works fine. On my computer if I run: node dist/ssr/index.js it just shows: Server listening at port 3000 and it's ready to go, and it works.

I imagine I have to do some kind of a bridge between Vercel and this index file but don't know how.

You can see my project, is open, just for learning intentions:

https://github.com/mpont91/menumkr

I'm just forcing the last commit again and again to prevent having tones of commit with same msg....

I'm sorry again, but could you please tell me exactly what I have to change?

• What should I have in vercel.json
• What should I have in api folder. Is it needed?
• Should I do more changes?

[TobyMosque]

in this example, /api is where the serverless function is configured.

READ MORE about serverless function on Vercel:
https://vercel.com/docs/concepts/functions/serverless-functions

in the case of the vercel, the serverless function is exposed as module.exports = app instead of module.exports.handler = app, but except by that, all the serverless section in the quasar docs is valid.

https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver#serverless

import { ssrListen } from 'quasar/wrappers';
export const listen = ssrListen(async ({ app, port, ssrHandler, isReady }) => {
  if (process.env.DEV) {
    await isReady();
    return await app.listen(port, () => {
      // we're ready to serve clients
    });
  } else {
    // in production
    // return { handler: ssrHandler };
    return ssrHandler as never;
  }
});

IMHO: i would drop any host who forces u to adopt serverless infra. u can look into render for a simpler approach.
https://render.com/docs/deploy-node-express-app

[mpont91]

Hi again @TobyMosque and thank you.

Well I understand the docs (at least I think) but I don't know how to deal on my use case.

The application is already working. I only want that users can access to https://menumkr.com and see the website :)

Let's see first the Vercel docs: https://vercel.com/guides/using-express-with-vercel#standalone-express

Yes I understand the example, you can create everything you want here inside the api folder (and I did). But I don't need any thing like this, no need a path like api/item/:slug/ I just want the paths I defined on the Quasar, my application, like: /dashboard, /login, etc...

But it's okay it's an example.

Then I go to Quasar docs (Vite): https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver#example-serverless-http

And yes I see these examples but where I have to put this? On the api/index.js instead of the example vercel code? I've already tried but still the same, it deploys fine but, keeps showing the javascript code on the home and if I browse the /api/index.js it just crashes the function.

I know it's a bad practice ask for the exact solution, but I think in my case it will help to understand all the pieces how they connect each other. Because right now I'm just lost. So lost.

As I said before, I have the project open. You can see all the files. I'm just asking the same as the previous answer:

• What should I have in vercel.json
• What should I have in api folder. Is it needed?
• Should I do more changes?

BTW thanks for letting me know this other provider render.com. It worked fine easily.
It has the start command where I can put this: node dist/ssr/index.js and it's done...

But anyway after spending so many hours on this I would like to make run on Vercel as well... Thank you

[dongwa]

deploy to Netlify with ssr mode see : #16565