Vercel deployment

default discord avatar
rgolubowicz
6 months ago
47

Hey all,



did anybody try to deploy PayloadCMS to the vercel? I've tried different vercel configurations and couldn't finish to make everything works - occurred different bugs like missing payload.config file, wrong frontend scripts and styles paths (not recognized), etc.



I'm wondering if anybody do that and it's working. I know that CLOUD is coming soon, but for today we need just a vercel as a PoC.

  • default discord avatar
    thisisnotchris
    6 months ago

    Relevant info:

    https://github.com/payloadcms/payload/discussions/528


    If you are building a website on top of Serverless Payload from a service like Vercel, it is going to send hundreds of simultaneous requests to build pages, and each requests is going to take db connection slots so you will need to be carefull depending on your MongoDB plan.


    https://github.com/payloadcms/payload/discussions/570


    Netlify and Vercel aren't good candidates for Express apps to be deployed on. Those platforms are best for serverless or fully static sites—while Payload requires an Express server.
  • default discord avatar
    rgolubowicz
    6 months ago

    Thanks,



    I've already see those issues and risks, but our team wants to investigate it on their own (those limits etc).



    Anyway, that didn't help me. I've tried with vercel config like that:



    { "version": 2, "rewrites": [{ "source": "/(.*)", "destination": "/api" }] }

    On the root of file I've created api/index.ts that's exporting src/server.ts



    Structure looks like that

    image.png
  • default discord avatar
    thisisnotchris
    6 months ago

    hmmm

  • default discord avatar
    rgolubowicz
    6 months ago

    btw, it's just an empty payload cms project - todos starter

  • default discord avatar
    thisisnotchris
    6 months ago

    Ah ok good to know



    So just to help you better



    You try to run build payload



    Then you try to run serve it



    that's when you get errors?

  • default discord avatar
    rgolubowicz
    6 months ago

    not really,


    I'm builiding everything on the. vercel (I've just make a screenshot locally to show u just a structure)

  • default discord avatar
    thisisnotchris
    6 months ago

    Hmm, hopefully I can help, I've only used Payload in normal enviornments, not in serverless

  • default discord avatar
    rgolubowicz
    6 months ago

    let me a second





    So just the frontend is not visible, there's some kind of issue with that



    When I try to call API directly, it's OK



    I've already tried to set output directory to "build" as well

    image.png
    image.png
  • default discord avatar
    thisisnotchris
    6 months ago

    ok so



    hopefuly this will give you some ideas



    We host payload at work through a proxy, so some of our configuration has been a bit more complex



    We direct our main traffic to port :3000 where payload lives



    So we needed to set the directory to static



    app.use(express.static("/var/www/beta.safsonline.com/client/"));



    note client is just an angular app



    we also had to route get requests to "/" to the client entry index.html



    since its an SPA



    if your API works, but you are unable to render anything via get



    my guess is the files it should be serving are not being served correctly

  • default discord avatar
    rgolubowicz
    6 months ago

    umm



    I don't think that can help me; imo payload cms should serve static files already



    @thisisnotchris I've did something like that



    { "version": 2, "rewrites": [ { "source": "/admin/:path", "destination": "/:path" }, { "source": "/(.*)", "destination": "/api" } ], "outputDirectory": "build", "buildCommand": "yarn build" }


    and it's from network perspective looks OK



    but basically I have a dark website and a main section is missing

    image.png
    image.png
  • default discord avatar
    thisisnotchris
    6 months ago

    How about your error log

  • default discord avatar
    rgolubowicz
    6 months ago

    There's no error log 😄



    Ok, I've did it



    If someone will gonna look for the solution



    { "version": 2, "rewrites": [{ "source": "/(.*)", "destination": "/api" }], "functions": { "api/index.ts": { "includeFiles": "build/**" } }, "outputDirectory": "build", "buildCommand": "yarn build" }

    It's the vercel.json



    There's one issue that homepage is not redirecting to the /admin/login, but gonna fix that 🙂



    So for now - it's need go directly /admin/login in url

  • default discord avatar
    thisisnotchris
    6 months ago

    Yayyyy

  • default discord avatar
    rgolubowicz
    6 months ago

    thanks @thisisnotchris for your support! ❤️

  • default discord avatar
    thisisnotchris
    6 months ago

    hey of course mate!

  • discord user avatar
    denolfe
    Payload Team
    6 months ago

    @rgolubowicz This is something to keep an eye on as well. 😉



    Not ready for primetime yet, though.



    https://github.com/payloadcms/next-payload
  • default discord avatar
    rgolubowicz
    6 months ago

    thanks, didn't see that before

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.