How to deploy MERN project (NodeJS, React) using render and netlify. PART 1.

Hey there,
This briefly explains how to deploy the MERN stack project using render and netlify for free.
part 2: • How to deploy MERN pro...
If you have any questions about this, let me know in the comment section.
And don't forget to subscribe to the channel.
Thank you.

[@gitunemployed]

Render : render.com/ Netlify : www.netlify.com/

[@emmanueljoseph939]

Hi. I had a question regarding a project that I built, I would need to show you to ask you, how can I do that?

[@gitunemployed]

@@emmanueljoseph939Sorry for the late reply. You can get me through LinkedIn ... linkedin.com/in/muhazahmed

[@Urdu_Insights_TV]

this is not a free tool

[@Urdu_Insights_TV]

render asking me about payment

[@MdArif-pc9bz]

​@@Urdu_Insights_TVYou can use Vercel as well instead of render.

[@renealbrechtsen9743]

This seems to be the easiest way to get my backend running. Thanks for this :)

[@thilakfernando2580]

Superb demonstration, many thanks to you

[@mohameddarwesh3564]

thanks man you saved me i am a frontend and i needed that a lot

[@user-fr4wg6qi5q]

Bhai thank you so much yr bhai pura yt chaan mara khi nhi mili asi video bhai thank you yaar god bless you

[@Arjunsiva]

thanks a lot. works like charm !

[@yuliiasvystak1644]

Everything works, thank you! You helped me a lot!

[@CorvasBhaskar]

Thank you, Sir 😇

[@HariPrasad-qe3hd]

So smooth. Thanks bro

[@mribrahimkhan4478]

Brother, thanks a lot I was able to deploy my application thanks to your video My kudos to you

[@gitunemployed]

Your welcome, keep supporting ❤

[@DiplomaticGrief]

This is great, but why no example code? Do you know why it would have a problem on the start script with nodemon?

[@hoowlsmentionsshorts]

what a lovely bro, i am very very thank full to you you solved my 6 month problems, Love all the way from Pakistan

[@gitunemployed]

You're welcome

[@iamsarb_0017]

Worked for me Thanks

[@kingb772]

Awesome Content !!

[@shivammaniya2962]

Thank you man

[@artefilexxx]

thank you for all of this brother

[@gitunemployed]

Your welcome

[@MatheusSilva-qm3ph]

Very cool!

[@AbhishekGupta-db9qy]

Nice on point tutorial...

[@gitunemployed]

thank you.

[@Your-Majesty]

THE BEST

[@Dev-or8cu]

Thank you for the explanation. What about mongo DB. and where can i see the UI for mongo DB after inserting record

[@gitunemployed]

if you got atlast, you can monitor from there.

[@popilarflims5397]

GOAT !!!!

[@costlycontent]

hello sir when i tried to deploy i am getting cors error even though i have installed and initialized cors in my backend do i have to do something in my frontend to remove it can you please help me.

[@monkey.dluffy4516]

main.jsx:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec. /vite.svg:1 Failed to load resource: the server responded with a status of 404 () getting this error for client side in netlify please help i have used react+vite

[@amruthniranjan1447]

I replaced the urls in my frontend with the render url, but im still having an issue. should i replace the backend endpoint urls with the same? I have a full stack express/react app. In the dev server, api calls work. But when I try deploying to render and netlify, they don't. I uploaded the backend server folder (which includes a copy of the most recent build) to render and then modified the frontend App.js fetch endpoints to the url that was provided to me from render, and then '"/name' where name is the same endpoint as it is in the backend server.js. I uploaded the frontend /client/build folder to netlify. Both the render link and the netlify link give me a page that is the front page of my web app. It is an app that is SUPPOSED TO take in the user input through a text field. If the user input follows certain criteria, it SHOULD call an api with that input as what is being sent. If not, the backend SHOULD send a failure message back to the frontend. So far, The page ONLY updates when the failure criteria is satisfied, and DOESN'T actually do what it's supposed to do when the input follows the valid criteria. Can you help me troubleshoot?

[@alberparavel9350]

Conseguiu resolver?

[@rameshsuvarna5301]

bhai i am learning full stack can u guide me where to begin and how. This field facinates me. Your one reply will be great and helpful

[@gitunemployed]

Sorry for the late replay. I suggest you to start with basics of frontend with HTML, CSS, js. Then step into any of frameworks like, React, angular, veu. Next you can step into backend, with nodjs (recommended) / python (recommended) / .Net / java. Databse: MongoDB & MySQL ( I recommend you to learn both for better opportunities) Git && GitHub. AWS S3, AWS EC2 (basics). All the best.

[@mohammedthousif1226]

Muhaz bai

[@mrnabby4178]

i did the same front end for netlify backend is for render.

[@as4928]

Can you help me connecting backed and frontend using proxy? I changed proxy from localhost to render and it is fetching data if I am running react app locally but not working on netlify

[@gitunemployed]

ya sure, connect me through LinkedIn

[@025-harshbindal7]

​@@gitunemployedbro same problem with me

[@gitunemployed]

@@025-harshbindal7 connect me through linkedIn, ill help you

[@AmitSingh-yn1gh]

Class constructer error errorhandler cannot involved without new

[@msbrdmr]

how did you handle setting cookies ? In my app, I have use render for both frontend and backend. I can not set cookies like I was doing when working on localhost.

[@gitunemployed]

It should work fine. However connect me through LinkedIn.

[@msbrdmr]

@@gitunemployed ty so much bro. I will

[@tanzilhassan2054]

can you make a video including the process of replacing your localhost links? im having issues connect my backend to my frontend.

[@gitunemployed]

Ya sure. It was something i forgot to include.

[@JacoBluezz]

Is there a reason you're not deploying the front-end with render? I figured you could deploy the frontend as a static site and that way the whole project can be managed in on eplace

[@gitunemployed]

Yes, you can. There's no particular reason to avoid render for the client side. But netlify is one of the famous platforms these days. So it's good to know about that too.

[@cuylerjvv]

@JacoBluezz I am currently struggling to deploy my full stack app ( have looked at render and cyclic). Will it be possible for you to help me?

[@animentalproducts5228]

Render is requiring card information before allowing you to use any of their services.

[@gitunemployed]

No need, please just select on free tire (512mb) like I showed in the video, no card information or payments are required.

[@haseebshahreffai8546]

Sir render company the update policy

[@gitunemployed]

@@haseebshahreffai8546 Im still using the free version, maybe its depended on location.

[@ahmerali3304]

@@haseebshahreffai8546 what's the solution??

[@awaismirza895]

just give your card details and make sure to have atleast 1 dollars worth of money inside. only then your card will be accepted. don't worry they don't charge you money, they just need card to verify.

[@chaitanyabhat6879]

how frontend and backend are interacting as if they are hosted on different platforms, in my case when i deployed backend its working fine but my frontend which is hosted on netlify is giving 404 for all api call? am i missing something ? please let me know

[@gitunemployed]

Sorry, i had forgotten add a important point in the video. You need to change your frontend Axios/fetch link from the local host to the link you got from render.com after the deployment of the backend. Let me if it still doesn't work.

[@025-harshbindal7]

Bro i am facing cors error on console

[@mylifehacks9381]

Hello, i guess my .env is not working correctly. i copied my env variables inside the .env key just like you did but when it got to replacing my DB password to real password from the .env file, it is saying Cannot read property 'replace' of undefined. Help

[@gitunemployed]

can you reach me through LinkedIn?

[@HardikSingh-ed4bo]

do I need to change the proxy too when we go live to access api's?

[@gitunemployed]

Yup, you can checkout part 2 for more details.

[@srishti7665]

I am facing this error while deploying : return new TSError(diagnosticText, diagnosticCodes); ^ TSError: ⨯ Unable to compile TypeScript: src/config/db.ts(1,22): error TS2307: Cannot find module 'mongoose' or its corresponding type declarations. at createTSError (/opt/render/project/src/server/node_modules/ts-node/src/index.ts:750:12) at reportTSError (/opt/render/project/src/server/node_modules/ts-node/src/index.ts:754:19) at getOutput (/opt/render/project/src/server/node_modules/ts-node/src/index.ts:941:36) at Object.compile (/opt/render/project/src/server/node_modules/ts-node/src/index.ts:1243:30) at Module.m._compile (/opt/render/project/src/server/node_modules/ts-node/src/index.ts:1370:30) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Object.require.extensions. [as .ts] (/opt/render/project/src/server/node_modules/ts-node/src/index.ts:1374:12) at Module.load (node:internal/modules/cjs/loader:1207:32) at Function.Module._load (node:internal/modules/cjs/loader:1023:12) at Module.require (node:internal/modules/cjs/loader:1235:19) { diagnosticText: "src/config/db.ts(1,22): error TS2307: Cannot find module 'mongoose' or its corresponding type declarations. ", diagnosticCodes: [ 2307 ] } [nodemon] app crashed - waiting for file changes before starting... But in the project all going well. What to do please help?

[@jotacedocarmo]

Hi Friend, I have an Angular application with webservice in Render with my application I create rooms and generate a code for each room, as when accessing this room in another browser I receive the message below: Failed to load resource: the server responded with a status of 404 () (Page Not Found) . Do you know what might have happened?

[@gitunemployed]

Sorry, i had forgotten add a important point in the video. You need to change your frontend Axios/fetch link from the local host to the link you got from render.com after the deployment of the backend. Let me if it still doesn't work.

[@mafridi106]

Are you using a template for the visual effects in your frontend? If so what is the name of the template?

[@gitunemployed]

Nope. Its a pure css (SCSS). You can go through my GitHub repo

[@AdityaSingh-in6ce]

what to do for cors errors

[@gitunemployed]

in backend, npm i cors const cors = require ("cors") app.use(cors()) connect me through linkedIn if you still face error

[@_tensai__]

i have successfully deployed both backend and frontend. But backend data is not rendering in the frontend. How can I link them?

[@gitunemployed]

You got you rendere ULR of backend right. Copy that and and in frontend, change the axios call or fetch from localhost to copied ULR link of render.

[@Arjunsiva]

Check your environment variables. Use them for API endpoints. Remember, for reactjs the env variable names must always start with REACT_APP_*

[@SumitSatre]

If we change our code and upload to github is that appears in render and netlify or not Please tell me

[@gitunemployed]

In netlify it works, but in render, sometimes you have to deploy again manually with latest commit.

[@gautamKumar-fb9jj]

how did you wrote .env file and what did you wrote in it, can you explain it please. I liked your video very much , its simple and easy to understand

[@gitunemployed]

.env is a file which contains secret credentials like cluster link... Jwt secret and etc... To hide that from public we use .env. if you need more information you can just ping me through LinkedIn

[@abdur786_]

Sir is video m...aapka backend ka url after deployment..... frontend m use hi nhi ho rha h data fetch krne k liye......but iske baad bhi aapka website kaam kr rha h....

[@gitunemployed]

it was working. But not anymore. Since after the recent update, you need to keep your backend server on (Which doesn't makes sense). So try using vercel for that.

[@frenkie1281]

@@gitunemployedcan you make a video how to do that

[@anghuy2335]

When im deploy , its show IP render try connect to my DB not in white list , how to fix it!

[@n13-ovanuc60]

do bên mongodb bác config thôi

[@comedyvideos8055]

Can you please tell me that how can I get rid of this cors error... Its working on my localhost... And in firefox after deployment too but chrome and edge browsers are showing cors error

[@gitunemployed]

1) make it universal Or 2) replace your frontend localhost url to the url you got after deploying. If still you get any issue, connected me though LinkedIn

[@comedyvideos8055]

@@gitunemployed ok i'll connect you on LinkedIn because what you are saying I have done it before but not working

[@jaysinghsolanki7094]

if im using postgres as my database will it work will it deploy backend ?

[@gitunemployed]

yes.

[@ridewithme9422]

How should I update for host in FRONTEND ?? Great video though

[@gitunemployed]

You got you rendere ULR of backend right. Copy that and and in frontend, change the axios call or fetch from localhost to copied ULR link of render.

[@ridewithme9422]

@@gitunemployed Yeah , Figured that out . Thanks

[@ricardo3763]

sorry i didnt understand how you conected the api backend with netlify ???

[@gitunemployed]

Please watch part 2. I had forgotten to mention this point in the first video.

[@Yourname-jx6bn]

Sir what we need to replace the api link from localhost in react ?

[@gitunemployed]

You will get the link to your website once it is deployed. you can use that instead of localhost.

[@Yourname-jx6bn]

@@gitunemployed okay thank you sir, and i get issue in live the node applicstion to render

[@gitunemployed]

@@Yourname-jx6bn Good to know.

[@prism2246]

Hi Brother, can I get access to your repo? I am doing a similar project and would like to refer your project code

[@gitunemployed]

ya sure. github.com/muhazAhmed/project-ReactCRUD.git

[@rodericdelacruz8296]

Hello im havin this problem on render but my code run smoothly on my vs code. MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.

[@southredmondtoxik1885]

I deployed on render platform but when I call my routes, it takes lot of time. Why?

[@cesarfusco8927]

As far as I know, render's servers are usually off most of the time. The server that is allocated to your application will start running when you first any of your routes, and then they will stay on for a few minutes. So everytime you do the first request in the last few minutes(15 I think) , it will take longer.

[@Strikeanime]

Bhai

[@Daddy30011]

Sir how you connected backend and frontend please tell. Till i know we have to just change localhost link to backend link in frontend folder. Please correct if i am wrong

[@gitunemployed]

just take the localhost (ex in frontend: localhost//(ur backer server port)/login ) if you have doubt, you can checkout my repo or connect me through linkedIn

[@Daddy30011]

ok thanks sir @@gitunemployed

[@yatishjain-wh3ke]

@@gitunemployed sir how set proxy , as adding route in every api is tedious work , your reply will very helpfull

[@gitunemployed]

@@yatishjain-wh3ke u have 2 options: Step 1) Create file giv any name (API_URL), in that file... export const API_URL = "http/localhost:4000". Now in your page, just import this file and use it, Ex: axios.get( API_URL + "/user/route"). Step 2) Proxy : In your package.json file, "proxy" : "http/localhost:4000/", and in pages : axios.get( "/user/route") I recommend using step one, which easy and efficient. If you have any issue further more, reach me through LinkedIn.

[@user-gu4yh4pd6m]

Okk so my server live on render successfully but it's not showing any data from database when I use my api with render link.... Plzzz help

[@gitunemployed]

Please watch part 2

[@user-cl4ww1gk4z]

which screen recording are u using

[@user-gx6jl2ck3b]

obs

[@codebyalbert]

Hello, it seems currently render needs you to add payment verification

[@gitunemployed]

No you no need to.

[@jetlinkarkha9659]

Can I use AWS instead of render?

[@gitunemployed]

Yes you can. You can go with AWS EC2.

[@jetlinkarkha9659]

@@gitunemployed please make video for that

[@kasifmansuri7552]

Nice channel name😂😂😂😂

[@humanity7880]

i have deployed my project but my backend is not working it is not logging or registering please help.

[@gitunemployed]

Sorry, i had forgotten add a important point in the video. You need to change your frontend Axios/fetch link from the local host to the link you got from render.com after the deployment of the backend. Let me if it still doesn't work.

[@humanity7880]

@@gitunemployed so i need to change it in github repo, where we are using proxy(backend url) in package.json of my frontend right? Correct me if im wrong or Tell me if somewhere else i need to the same

[@gitunemployed]

@@humanity7880 yes, if your using proxy, you have to change from there.

[@ukkashrecords7046]

how can i create .env file

[@gitunemployed]

install dotenv package, then require that... require("dotenv").config(); create a .env file, in file: PORT = 4000

[@kingfisher7348]

cookie is not setted on the browser during login, how to solve?

[@gitunemployed]

connect me thorugh linkedin

[@tamilarasan-uy8oz]

hi how to solve this error sh: 1: nodemon: Permission denied

[@gitunemployed]

Try installing nodemon globally. npm install -g nodemon

[@GreenChiCast_GCC]

@@gitunemployed doesn't work 😢

[@ridhamanand8519]

it is not working when site is refreshed

[@gitunemployed]

You need to add web.config file. Please watch part 2 video.

[@animentalproducts5228]

Hi, render isn't free to use unless you provide your card information.

[@gitunemployed]

Nope, its free. You dont have to give any card details.

[@mohamedfasil7680]

can you please provide your git repo....

[@gitunemployed]

github.com/muhazAhmed

[@MaidSejdinovic]

My website works perfectly fine,but after i deployed it on render backend doesn't work.😢

[@nlp3834]

yea he forgot to mention how to hook up the two. I'm also in that situation. I believe what you want to do is replace all the urls in your frontend to match the url of ur backend in this case. Its the url for your backend on render. Make sure you have cors installed as well to prevent cors errors

[@a.b.x.543]

​@@nlp3834 I am still face this issue after your suggestions

[@025-harshbindal7]

​@@nlp3834bro may you explain me in detail i am also have cors error on console

[@025-harshbindal7]

​@@nlp3834i have replace all the urls with the backend render url

[@user-jq9po6rd8q]

hi , you miss importent part of video, you have not connceted reder backend,

[@gitunemployed]

Yup, so i created part 2😅

[@user-cg3kh4du3d]

deployement failed due at build stage

[@gitunemployed]

Ping me through LinkedIn... Ill try to help you if possible

[@masterTimon01]

sir please help. I've deployed the frontend in netlify and backend on render. But if i tried logging in in my website the backend doesnt work. How can i fix this sir? Thanks in advance.

[@gitunemployed]

DM me through LinkedIn linkedin.com/in/muhazahmed Thank you.

[@mack485]

@@gitunemployed Im having the same issue. do you mind sharing the solution?

[@gitunemployed]

@@mack485 you need to change the localhost API from frontend to the link u got after deploying in render.

[@maheshkumarkasturi1203]

my sitte has been deployed successfully but as i preview page not found coming ? what should i do please help

[@gitunemployed]

Inspect your page. Still if you couldn't figrout, DM me through LinkedIn

[@hammedbanji7814]

Doesn't work for me.

[@gitunemployed]

elaborate the issue please