Deploy a MERN STACK app on Render platform in 2024

💾 MERN app source code: github.com/Jon...
⭐⭐⭐⭐⭐ MERN | PART 1 | BACKEND ⭐⭐⭐⭐⭐
🎬 Backend video: • Let's learn The MERN S...
💾 Backend source code: github.com/Jon...
⭐⭐⭐⭐⭐ MERN | PART 2 | FRONTEND ⭐⭐⭐⭐⭐
💾 Frontend source code: github.com/Jon...
🌐 Render website: render.com/
⭐⭐⭐⭐⭐ Watch my other playlists ⭐⭐⭐⭐⭐
📃 Web Developer Path playlist: • Web Developer Path
📃 Tips & Tricks playlist: • Tips and Tricks
🙏 Thank you for watching my video please don't forget to LIKE and SUBSCRIBE.
🎮 My gaming channel: / @jonvadar
☕ Support me: www.buymeacoff...
🌐 My website: jonvadar.xyz/
#mernstack #react #reactjs #frontend #nodejs #express #api #mongodb #mongoose #jsonwebtoken #javascript #es6 #js #jstutorial #learnwebdevelopment #webdevelopment #fullstack #backendwebdevelopment #backend

[@unpaired-electron]

Deployed my first app today. Thank you so much Jon!!

[@Inumaru3]

Another great content! Is it also possible for you to show deployments of seperate frontend and backend instead of merging both into one? while showing the process of handling CORS, fixing needed URL paths and other issues that there may be in the process of doing so?

[@frapes614]

Thank you, the only thing that worked for me after hours of searching.

[@JedOpeningThings]

You don't need to separate into two services.
If you have a MERN project etc. You will need to run npm run build in your client directory.
1. Once the dist folder is created.
2. You will have to go to your server.ts or wherever you server startup is and serve the static files. (Google this)
3. Once the static files are connected to your functions in server.ts. Head on to render and do the same as this video.

[@rany2126]

Nice one Jon! Thank you!

[@srikalyani3393]

Thank you so much, you helped me alot

[@theblancmange1265]

Thank you!

[@ramashish294]

Thanku sir, you explain nicely

[@joshdionio1075]

but how can i add my environment variables for my client, im using vite

[@devsuthar6795]

someone help im facing bcrypt error Error: /opt/render/project/src/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node: invalid ELF header

[@samarbhao4703]

Thank you man

[@caT_eDiTx0]

Bro Why the rush?
I am getting error that is json error but its good locally😢

[@alexpiano]

Hello! This looks really promissing, I'll try it.
Although in my case I'm using a postgres database, so I guess I need first to setup a postgresSQL service on render prior to setting up the web service right?

[@ismaelIb8]

can u update ur github cz they are 2 separated parts (frontend folder is not in backendi folder)

[@my-plastine]

thx bro for this good steps. niceee

[@Sharath.46]

sir do you know when render free plan ends ?

[@rudrarathore6321]

showing enoent err
npm ERR! enoent ENOENT: no such file or directory, open '/opt/render/project/src/my_rooms/package.json'
what should I do?

[@isaiahokon5192]

In the root directory, type in the filepath to your server folder... For example: ./server

[@AnasxonDev]

@@isaiahokon5192 thank you so much

[@royfrias4379]

Hey jon thanks for the great videos but I am having a big problem I keep getting this error constantly , Ive been trying everything and I just cant get this to work what so ever any tips or advise you can give me please it would be greatly appreciated
Error: Cannot find module '/opt/render/project/src/server/index.js'
at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
at Module._load (node:internal/modules/cjs/loader:1074:27)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:166:5)
at node:internal/main/run_main_module:30:49 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

[@luce9574]

thankyou so much for this video , It helped me a lot

[@aditya8778]

any help on this
Rollup failed to resolve import "react-router-dom" from "/opt/render/project/src/server/client/src/main.jsx".

[@abhishekpanwar-vg7hj]

thanks bro really helpful video must watch