Just because there exists a person like you who is sharing valuable knowledge through youtube, I still come to youtube to learn instead of reading docs
This is fantastic!!, been banging my thick DEV head on a brick wall for the last two months trying to get shopify, react & express- node running in Plesk! This video and the narrator is so articulate and chilled out, 5 Stars and many thanks for taking the time to explain this to us muggins.
Try "npx create-vite-express", that is similar with laravel+inertiajs+react but only express as be and react as fe. You have no need to run build command every file modified in react
This is a brilliant video that explains how to (1) deal with CORS errors, (2) enabled, by way of the solution, hiding API keys in the server side .env. file because now there is a server in which they can be hidden. No other video / web site explains the problem when your front end has to access a third party API server, and to do both (1) and (2) you need an API proxy server. Very, very good and well explained solution that no one out there seems to be dealing with, even though the 'man in the middle' API proxy must be a common scenario, Excellent job.
Spectacular man, thank you. Just starting my first major web app project and learning the initial configuration has been a whirl. I want to make sure the foundation is done right, and this was the final piece of the puzzle. Going to start working on the project management side of things and then get started on development!
you are freaking awesome bro. you explained the reasoning behind the decisions you made SO WELL and the only thing I am upset about is that I didnt find this video sooner. KEEP DOING WHAT YOURE DOING!!
Thank you so much!! This cleared up my confusion and helped me understand how React works, in a way that no amount of template projects or copy-pasting could do, it's exactly what I needed
I was looking for some template engine that allows react code (or at least jsx) in my express.js. I'm glad I found THIS so I don't need any jsx-in-express-like solutions
Nice tutorial, well explained. There is an issue with newer versions of webpack, where you get a message like "Invalid Host header". To get it working you need to set an environment variable before starting the client server - at least on Linux - didn't check on Windows. The environment variable to be set is: DANGEROUSLY_DISABLE_HOST_CHECK=true. There are other solutions, but this is the simplest one.
Wow, so cool 👏👏👏👏👏👏 Fantastic! Thanks for this amazing tutorial. I'm going to go ahead and implement it. I have a few questions: 1. I think you could add in your server some commands to `npm run build` your client, copy the `build` folder into your server and then run the actual server. That could simplify the whole process. Any reason why you didn't do that? 2. I realized that in minute ~35:30 you start the client only without the server but still the data was served. Might it be that you server got stuck running? I'd have expected it to fail but still it served. Do you know?
Yes I too have the same questions. When we move this to git and automate the build and deployment process, how the whole stuff works is what I need to know.
Great tutorial. Thanks a lot. It will be great if you can show us how to move this to git and automate the build process and deploy this to Amazon ECS container to have the whole stuff works from ECS. And also, can we add any authorisation check in express before serving the index.html file?
I hope Universe will bless your kind heart, you saved me, i was having this huge problem with my frontend React App deployed on Netlify and my backend express app deployed on Render .. I lost a lot of hair stressing out why i can't see cookies that i was setting for the frontend ...it was because the domain was not the same .. and i can access cookies only if the domain is the same .. thanks bro
aahhh!!! brother... this is exactly what i am searching for the past days, i wish i found your channel earlier... a question for you -- do you ever tried to connect mongodb (running on windows) to our express app (running on wsl). I have tried every single method said in stackoverflow, reddit and others, maybe i didn't done it right. i want you to make a video on that..... Onegashimashu🙏🙏🥺 nee-san
There's a way where we can directly create the Build folder inside a specified folder ("server" folder in our case) instead of manually copy pasting it every time in the server folder. So, is there a specific reason you did not do that?
Thank you so much for this video. I was hoping this would help me solve the issue with dynamic meta tags. I basically need to change the meta tags in the head of the HTML document before it gets sent to the client.
great tutorial. one question: does your method compromise and expose secret apikeys and process.env variables? (i.e. now is everything at 8080 bc there is no proxy, so it's visible for the frontend and may steal the apikeys). this is important to be clarified. thank you very much.
No. only the index.html will be served to the browser. And you can keep all the secret api keys in express server and use them when you call other apis from express server to get the data and you can send the result data to browser.
@@ilyalakhno2850 agree, youre rerendering index.html each navigate causing all of your state to be lost. Honestly this isnt really a good solution for react apps as youre killing the whole point of states.
@@AnnieUllyot No the state will be retained. The index.html will be loaded from the express server for the very first time only. When you change the route, the route will be served by the mapped component and this component will already be available in the browser side (its bundled with the js file included in the index.html). The only time this component goes to the server is when it gets the data by calling the api and that api serves the json response and not the html. Hence the component will be rendered in the browser side with the data its getting from the express server api.
Great video! I want to have a setup where I can have 1 host app (express) and multiple client apps (react bundle), so I cannot have the express server folder inside react like you mentioned. Is it possible to have react project separate which generates bundle deployed in say S3, and Express project in Ec2,. Is there a way the express server can serve static assets (react bundle) from S3. Is this the correct setup? What would you recommend? Thanks
for any react app, any user can see all my javascript, and we can't expose our backend code to anyone, so how do we make sure that we don't expose our backend to anyone using this method
![React JS Tutorial [2023]: Backend Server Setup Using NodeJS and Express](http://i.ytimg.com/vi/RHLxtAo0aEI/mqdefault.jpg)
Just because there exists a person like you who is sharing valuable knowledge through youtube, I still come to youtube to learn instead of reading docs
Finally!!! someone who explains the actual use case for react and express
This is fantastic!!, been banging my thick DEV head on a brick wall for the last two months trying to get shopify, react & express- node running in Plesk! This video and the narrator is so articulate and chilled out, 5 Stars and many thanks for taking the time to explain this to us muggins.
Try "npx create-vite-express", that is similar with laravel+inertiajs+react but only express as be and react as fe. You have no need to run build command every file modified in react
This is a brilliant video that explains how to (1) deal with CORS errors, (2) enabled, by way of the solution, hiding API keys in the server side .env. file because now there is a server in which they can be hidden. No other video / web site explains the problem when your front end has to access a third party API server, and to do both (1) and (2) you need an API proxy server. Very, very good and well explained solution that no one out there seems to be dealing with, even though the 'man in the middle' API proxy must be a common scenario, Excellent job.
Spectacular man, thank you. Just starting my first major web app project and learning the initial configuration has been a whirl. I want to make sure the foundation is done right, and this was the final piece of the puzzle. Going to start working on the project management side of things and then get started on development!
you are freaking awesome bro. you explained the reasoning behind the decisions you made SO WELL and the only thing I am upset about is that I didnt find this video sooner. KEEP DOING WHAT YOURE DOING!!
Thank you so much!!
This cleared up my confusion and helped me understand how React works, in a way that no amount of template projects or copy-pasting could do, it's exactly what I needed
Thank you for such a detailed explanation with demonstration. Hope you do more in your upcoming videos.
Many thanks for sharing this simple but elegant solution!
I was looking for some template engine that allows react code (or at least jsx) in my express.js. I'm glad I found THIS so I don't need any jsx-in-express-like solutions
Amazing, thank you- building my first project with the two- super helpful
Fantastic Explanation. Thank you :-)
Nice tutorial, well explained. There is an issue with newer versions of webpack, where you get a message like "Invalid Host header". To get it working you need to set an environment variable before starting the client server - at least on Linux - didn't check on Windows. The environment variable to be set is: DANGEROUSLY_DISABLE_HOST_CHECK=true. There are other solutions, but this is the simplest one.
Thanks for this wonderful tutorial
Thank you a lot sir, you definetely are a life saver!! My boss cannot yell at me now
Thanks a lot, really well done, one of the best tutorials I've ever seen!
Wow, so cool 👏👏👏👏👏👏 Fantastic! Thanks for this amazing tutorial. I'm going to go ahead and implement it.
I have a few questions:
1. I think you could add in your server some commands to `npm run build` your client, copy the `build` folder into your server and then run the actual server. That could simplify the whole process. Any reason why you didn't do that?
2. I realized that in minute ~35:30 you start the client only without the server but still the data was served. Might it be that you server got stuck running? I'd have expected it to fail but still it served. Do you know?
Yes I too have the same questions. When we move this to git and automate the build and deployment process, how the whole stuff works is what I need to know.
Absolutely wonderful tutorial! I have been trying to find a solution for this for ages and now I see your video. Thanks a lot. Liked and subscribed!
Great tutorial. Thanks a lot. It will be great if you can show us how to move this to git and automate the build process and deploy this to Amazon ECS container to have the whole stuff works from ECS. And also, can we add any authorisation check in express before serving the index.html file?
It's really what I was looking for, great
I hope Universe will bless your kind heart, you saved me, i was having this huge problem with my frontend React App deployed on Netlify and my backend express app deployed on Render .. I lost a lot of hair stressing out why i can't see cookies that i was setting for the frontend ...it was because the domain was not the same .. and i can access cookies only if the domain is the same .. thanks bro
aahhh!!! brother... this is exactly what i am searching for the past days, i wish i found your channel earlier...
a question for you -- do you ever tried to connect mongodb (running on windows) to our express app (running on wsl). I have tried every single method said in stackoverflow, reddit and others, maybe i didn't done it right. i want you to make a video on that..... Onegashimashu🙏🙏🥺 nee-san
perfect explanation..
thank you, exactly what I was looking for
This is gold! Thanks
Really Appreciate it man. Literally Saved me.
Thanks Man!!! You are the best! :))
There's a way where we can directly create the Build folder inside a specified folder ("server" folder in our case) instead of manually copy pasting it every time in the server folder. So, is there a specific reason you did not do that?
Awesome ! Just the thing I was looking for. But could you tell me, if I can do the same with NextJS and NodeJS (ExpressJS)?
Excellent video
Thank you so much for this video. I was hoping this would help me solve the issue with dynamic meta tags. I basically need to change the meta tags in the head of the HTML document before it gets sent to the client.
I have the same problem, did this solution help you ?
Sadly looks like Next.js or maybe Remix would be the easiest ways to achieve this.
Wonderful, thank sir it was very helpful
Thank you dude.
great tutorial. one question: does your method compromise and expose secret apikeys and process.env variables? (i.e. now is everything at 8080 bc there is no proxy, so it's visible for the frontend and may steal the apikeys). this is important to be clarified. thank you very much.
No. only the index.html will be served to the browser. And you can keep all the secret api keys in express server and use them when you call other apis from express server to get the data and you can send the result data to browser.
you are brillant
this is amazing, thank you so much !
Excellent video content.
Great video, thanks a lot
yeah. I need this.
It is possible to package this and publish on npm. ?
what if react have multiple routes using react-router-dom , How server will respond to client side routes
Please have you found an answer to this question?
plz reply
thanks for the video
great video, thx
What if our react app has react router? How will the pages route? I am using vite
not as expected :(
@@ilyalakhno2850 agree, youre rerendering index.html each navigate causing all of your state to be lost. Honestly this isnt really a good solution for react apps as youre killing the whole point of states.
@@AnnieUllyot No the state will be retained. The index.html will be loaded from the express server for the very first time only. When you change the route, the route will be served by the mapped component and this component will already be available in the browser side (its bundled with the js file included in the index.html). The only time this component goes to the server is when it gets the data by calling the api and that api serves the json response and not the html. Hence the component will be rendered in the browser side with the data its getting from the express server api.
I love you bruh 👍
Thanks a lot !!
Great video! I want to have a setup where I can have 1 host app (express) and multiple client apps (react bundle), so I cannot have the express server folder inside react like you mentioned. Is it possible to have react project separate which generates bundle deployed in say S3, and Express project in Ec2,. Is there a way the express server can serve static assets (react bundle) from S3. Is this the correct setup? What would you recommend? Thanks
he does not have the express server folder inside the react. He has the react build folder inside the express server folder.
for any react app, any user can see all my javascript, and we can't expose our backend code to anyone, so how do we make sure that we don't expose our backend to anyone using this method
only the index.html file will be served to the browser. The back end code will not be visible from browser.
Thanks 🙏
Niiiice
thanks.
how to deploy this into the vercel
I have the same problem, how you do this ?
Thanks a lot!!