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.
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....
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.
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?
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
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
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.
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
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.
.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
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
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.
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
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
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?
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.
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.
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.
@@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
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.
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
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?
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.
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
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.
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
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
@@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.
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.
Render : render.com/
Netlify : www.netlify.com/
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?
@@emmanueljoseph939Sorry for the late reply. You can get me through LinkedIn ... linkedin.com/in/muhazahmed
this is not a free tool
render asking me about payment
@@Urdu_Insights_TVYou can use Vercel as well instead of render.
This seems to be the easiest way to get my backend running. Thanks for this :)
thanks sir ...because of u only I hv created my first full-stack project
thanks man
you saved me
i am a frontend and i needed that a lot
what a lovely bro, i am very very thank full to you you solved my 6 month problems, Love all the way from Pakistan
You're welcome
Thanks to the core for the easiest explanation🙌❤
Bhai thank you so much yr bhai pura yt chaan mara khi nhi mili asi video bhai thank you yaar god bless you
Brother, thanks a lot
I was able to deploy my application thanks to your video
My kudos to you
Your welcome, keep supporting ❤
Everything works, thank you! You helped me a lot!
This is great, but why no example code? Do you know why it would have a problem on the start script with nodemon?
thanks a lot. works like charm !
I have deployed both backend and frontend in render but it fetches data slowly and its annoying..can u suggest how to make the performance better
So smooth. Thanks bro
Awesome Content !!
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.
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....
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.
@@gitunemployedcan you make a video how to do that
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?
Worked for me Thanks
i have successfully deployed both backend and frontend. But backend data is not rendering in the frontend. How can I link them?
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.
Check your environment variables. Use them for API endpoints. Remember, for reactjs the env variable names must always start with REACT_APP_*
Nice on point tutorial...
thank you.
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
Class constructer error errorhandler cannot involved without new
Thank you, Sir 😇
i did the same front end for netlify backend is for render.
Thank you man
If we change our code and upload to github is that appears in render and netlify or not
Please tell me
In netlify it works, but in render, sometimes you have to deploy again manually with latest commit.
When im deploy , its show IP render try connect to my DB not in white list , how to fix it!
do bên mongodb bác config thôi
Very cool!
My website works perfectly fine,but after i deployed it on render backend doesn't work.😢
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
@@nlp3834 I am still face this issue after your suggestions
@@nlp3834bro may you explain me in detail i am also have cors error on console
@@nlp3834i have replace all the urls with the backend render url
THE BEST
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
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.
GOAT !!!!
sorry i didnt understand how you conected the api backend with netlify ???
Please watch part 2.
I had forgotten to mention this point in the first video.
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
can you reach me through LinkedIn?
Render is requiring card information before allowing you to use any of their services.
No need, please just select on free tire (512mb) like I showed in the video, no card information or payments are required.
Sir render company the update policy
@@haseebshahreffai8546 Im still using the free version, maybe its depended on location.
@@haseebshahreffai8546 what's the solution??
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.
please solve my problem cookies not get on backend please solve my problem
thank you for all of this brother
Your welcome
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
.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
hello im using react-vite i did what u did on frontend but it didnt work is there something i need to change ??
Please take a time watch part 2. I have mentioned some common errors faced in this video. If you still have any questions, let me know
Thank you for the explanation.
What about mongo DB. and where can i see the UI for mongo DB after inserting record
if you got atlast, you can monitor from there.
Hello, it seems currently render needs you to add payment verification
No you no need to.
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
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.
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
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
@@gitunemployed ok i'll connect you on LinkedIn because what you are saying I have done it before but not working
Muhaz bai
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
Please watch part 2
can you make a video including the process of replacing your localhost links? im having issues connect my backend to my frontend.
Ya sure. It was something i forgot to include.
it is not working when site is refreshed
You need to add web.config file. Please watch part 2 video.
Sir what we need to replace the api link from localhost in react ?
You will get the link to your website once it is deployed. you can use that instead of localhost.
@@gitunemployed okay thank you sir, and i get issue in live the node applicstion to render
@@Yourname-jx6bn Good to know.
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?
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.
hi , you miss importent part of video, you have not connceted reder backend,
Yup, so i created part 2😅
do I need to change the proxy too when we go live to access api's?
Yup, you can checkout part 2 for more details.
cookie is not setted on the browser during login, how to solve?
connect me thorugh linkedin
Bro i am facing cors error on console
Hi Brother,
can I get access to your repo?
I am doing a similar project and would like to refer your project code
ya sure.
github.com/muhazAhmed/project-ReactCRUD.git
deployement failed due at build stage
Ping me through LinkedIn... Ill try to help you if possible
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.
i have deployed my project but my backend is not working it is not logging or registering please help.
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.
@@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
@@humanity7880 yes, if your using proxy, you have to change from there.
I deployed on render platform but when I call my routes, it takes lot of time. Why?
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.
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
ya sure, connect me through LinkedIn
@@gitunemployedbro same problem with me
@@025-harshbindal7 connect me through linkedIn, ill help you
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?
Conseguiu resolver?
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.
It should work fine. However connect me through LinkedIn.
@@gitunemployed ty so much bro. I will
Nice channel name😂😂😂😂
Hi, render isn't free to use unless you provide your card information.
Nope, its free. You dont have to give any card details.
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
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.
@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?
if im using postgres as my database will it work will it deploy backend ?
yes.
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
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
ok thanks sir @@gitunemployed
@@gitunemployed sir how set proxy , as adding route in every api is tedious work , your reply will very helpfull
@@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.
how can i create .env file
install dotenv package,
then require that...
require("dotenv").config();
create a .env file,
in file: PORT = 4000
How should I update for host in FRONTEND ??
Great video though
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.
@@gitunemployed Yeah , Figured that out . Thanks
hi how to solve this error sh: 1: nodemon: Permission denied
Try installing nodemon globally.
npm install -g nodemon
@@gitunemployed doesn't work 😢
can you please provide your git repo....
github.com/muhazAhmed
what to do for cors errors
in backend, npm i cors
const cors = require ("cors")
app.use(cors())
connect me through linkedIn if you still face error
Are you using a template for the visual effects in your frontend? If so what is the name of the template?
Nope. Its a pure css (SCSS). You can go through my GitHub repo
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.
DM me through LinkedIn
linkedin.com/in/muhazahmed
Thank you.
@@gitunemployed Im having the same issue. do you mind sharing the solution?
@@mack485 you need to change the localhost API from frontend to the link u got after deploying in render.
my sitte has been deployed successfully but as i preview page not found coming ? what should i do please help
Inspect your page. Still if you couldn't figrout, DM me through LinkedIn
which screen recording are u using
obs
Can I use AWS instead of render?
Yes you can. You can go with AWS EC2.
@@gitunemployed please make video for that
Bhai
Doesn't work for me.
elaborate the issue please