Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | JavaScript Mastery - Programming & Coding Community | Page 1

late citrus Oct 23, 2024, 9:23 AM

#

Help Needed: Deploying Payload CMS Project to Vercel with MongoDB

Hi everyone,

I’ve just finished following a tutorial to build a web project using Payload CMS, and everything works fine. However, since it’s currently hosted on a paid plan with Payload, I’m looking to migrate the project to a free hosting solution with MongoDB Atlas for the database and Vercel for web hosting.

What I've done so far:

Copied the Mongo URI from the .env file.
Downloaded the MongoDB Compass GUI to view my MongoDB collections.
Connected to the database using the GUI.
Exported the collections individually as JSON files.
Created a new database (e.g., MongoDB Atlas or AWS) and got the new database URI.
Imported the JSON files as new collections into the new database via the GUI.
Recovered all my database and collections, as well as my assets.

After completing these steps, I copied the required environment variables to Vercel, and the build process succeeded. However, once deployed, the website shows that it your db is currently empty to the database

Problem:

Although the MongoDB connection seems successful, the website indicates a failure to connect once it’s live. I'm not sure where the issue lies, whether it's in the environment variables, database setup, or the connection to Vercel.

Any help would be appreciated! If anyone has experience with Payload CMS, MongoDB, or deploying to Vercel, I'd love to hear your thoughts.

Thanks in advance!

#

Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024

#

The build log

📎 message.txt

late citrus Oct 23, 2024, 9:47 AM

#

if there is anyone interested into working on a solution together im in, just send a message 🙂

cobalt wyvern Oct 23, 2024, 11:31 AM

#

What's the problem there? It deployed right and the UI could connect to the database, I think

late citrus Oct 23, 2024, 11:33 AM

#

Yes but any clue why ?

#

When im in the tutorial environment everything works as expected

#

But once i migrated to vercel i end up with this issue

cobalt wyvern Oct 23, 2024, 11:34 AM

#

But what's the problem? is the application not connecting to the db? is it not deploying right?

late citrus Oct 23, 2024, 11:35 AM

#

I dont have any error messages, the connection to the db seems to be ok as you can see in the log. For a reason i dont get, i end up with this template “Payload ecommerce template” after the deployment instead of the website with all the assets

cobalt wyvern Oct 23, 2024, 11:36 AM

#

did you change that in the index page to not be "Payload ecommerce template"?

late citrus Oct 23, 2024, 11:37 AM

#

It might be a configuration in the CMS files but I didnt find what is exactly the problem here

#

mmm not sure what are you talking about

#

Can you specify the file ?

#

Did you succeed on migrate the website yourself?

cobalt wyvern Oct 23, 2024, 11:38 AM

#

index.tsx? I don't use nextjs, it's the one at the base

#

btw, I recommend working on the basics, not doing those

#

deploying is like, supposed to be after a lot of stuff

#

but if you just "copied" everything from a template and deployed it, it's right there

late citrus Oct 23, 2024, 11:40 AM

#

there is litterally a hundred of file index.tsx in this project

cobalt wyvern Oct 23, 2024, 11:40 AM

#

late citrus there is litterally a hundred of file index.tsx in this project

index of the page, the / route

late citrus Oct 23, 2024, 11:40 AM

#

i think you dont get it right

#

The website works perfectly in the tutorial environment, but it fails to connect when migrating to a free solution with MongoDB Atlas and Vercel.

cobalt wyvern Oct 23, 2024, 11:42 AM

#

late citrus i think you dont get it right

how not? you're in the index page, it's showing the content to that page.
nothing seems to be wrong there

cobalt wyvern Oct 23, 2024, 11:43 AM

#

late citrus The website works perfectly in the tutorial environment, but it fails to connect...

it doesn't though, it shows in the log that it's working

#

is there any problems in the browser logs or in server logs?

late citrus Oct 23, 2024, 11:43 AM

#

yes that s why im so confused

#

there is no error anywhere in the build log

cobalt wyvern Oct 23, 2024, 11:43 AM

#

server log then

late citrus Oct 23, 2024, 11:43 AM

#

but i still have this genereic template showing instead of the actual website

#

here is my online website

cobalt wyvern Oct 23, 2024, 11:44 AM

#

#

the one that is working normally...?

late citrus Oct 23, 2024, 11:44 AM

#

but its not going to be online tomorrow

#

because This project has a subscription status of past_due on payload

#

and im trying to migrate to a free solution

cobalt wyvern Oct 23, 2024, 11:45 AM

#

free doesn't exist :d

late citrus Oct 23, 2024, 11:45 AM

#

vercel + mongo db atlas

cobalt wyvern Oct 23, 2024, 11:46 AM

#

that's def not free

late citrus Oct 23, 2024, 11:46 AM

#

?

cobalt wyvern Oct 23, 2024, 11:46 AM

#

it starts free... until they charge you a lot

#

like, a lot

late citrus Oct 23, 2024, 11:46 AM

#

ok its not the point here i m not going to debate on this

#

just here to find people who are experiencing the same issue

#

and have been into the project like i did

cobalt wyvern Oct 23, 2024, 11:48 AM

#

is it getting pushed to vercel automagically?

late citrus Oct 23, 2024, 11:48 AM

#

you have to deploy manually with your secret files and your mongodb uri

#

then vercel do the rest yes

cobalt wyvern Oct 23, 2024, 11:48 AM

#

ok, then deploy again

#

and see the build and server logs

late citrus Oct 23, 2024, 11:49 AM

#

i just copied past the log already

#

all the information i have are already here explain on the top

cobalt wyvern Oct 23, 2024, 11:49 AM

#

late citrus i just copied past the log already

that's build logs, not the server logs

late citrus Oct 23, 2024, 11:50 AM

#

do you know payload ?

#

do you work with it ?

cobalt wyvern Oct 23, 2024, 11:50 AM

#

no, but deploying is deploying.

#

maybe you forgot to deploy recently, that's why I asked for you to deploy again

late citrus Oct 23, 2024, 11:51 AM

#

have you been through this process with this specific project ?

cobalt wyvern Oct 23, 2024, 11:51 AM

#

also the server logs would be empty, which helps

late citrus Oct 23, 2024, 11:52 AM

#

you dont deploy in the same environnemnt

cobalt wyvern Oct 23, 2024, 11:52 AM

#

late citrus have you been through this process with this specific project ?

I've deployed apps, yes, not that one bc it's not something I've been interested on

late citrus Oct 23, 2024, 11:52 AM

#

so its totally different

#

it might work for you on other case

#

but trust me bro not this one

cobalt wyvern Oct 23, 2024, 11:52 AM

#

it's the same

late citrus Oct 23, 2024, 11:53 AM

#

ok so what is the solution ?

cobalt wyvern Oct 23, 2024, 11:53 AM

#

you follow the steps you previously went to find the problem, it's simple

#

you need the server logs, also clean cache would help

late citrus Oct 23, 2024, 11:54 AM

#

server log ?

#

i just have build and deploy log here

cobalt wyvern Oct 23, 2024, 11:55 AM

#

logs when your server is running

#

go in your vercel page, it's every provider has a way to find those

#

that's the problem of just blindly following yt tutorials, you need to learn the basics first, then build upon it

late citrus Oct 23, 2024, 11:58 AM

#

i know i regret to follow those and get trap into a paid environnement

#

first time that i just go into this

#

but you litteraly spend your time to copy past code without trully understanding what you are doing

#

and you end up with something you cannot really migrate at the end for your own portofolio

cobalt wyvern Oct 23, 2024, 12:01 PM

#

portfolios kinda don't matter if you can't replicate it or even implement part of it alone

late citrus Oct 23, 2024, 12:02 PM

#

yeah right

#

let me try to redeploy one more time and catch some error in the runtime server log

#

i think i found the view in vercel

#

#

    at node:internal/deps/undici/undici:13178:13
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  [cause]: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1607:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}```

#

that suggests that the application is trying to connect to localhost instead of my production database.

late citrus Oct 23, 2024, 1:33 PM

#

have to change the secret key :

NEXT_PUBLIC_SERVER_URL=http://localhost:3000
PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000```

by :

```NEXT_PUBLIC_SERVER_URL=https://your-domaine-vercel.vercel.app
PAYLOAD_PUBLIC_SERVER_URL=https://your-domaine-vercel.vercel.app```

#

but now end up with hundred or error from api/graphQL

cobalt wyvern Oct 24, 2024, 3:58 AM

#

sry, I was working/studying, that took a while

cobalt wyvern Oct 24, 2024, 3:59 AM

#

late citrus have to change the secret key : ``` NEXT_PUBLIC_SERVER_URL=http://localhost:300...

after changing and pushing it, does it work or is it having any errors?

late citrus Oct 24, 2024, 9:46 AM

#

sadly not yet

#

i still have a tons of error message related to GraphQl API

#

dont know what to do with it

cobalt wyvern Oct 24, 2024, 10:26 PM

#

wait, what

#

why is it using graphql, is there any big reason for it

late citrus Oct 25, 2024, 1:12 AM

#

I dont know mate

cobalt wyvern Oct 26, 2024, 4:30 PM

#

wdym... it's your project :d

#Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024

Help Needed: Deploying Payload CMS Project to Vercel with MongoDB

What I've done so far:

Problem: