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.
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!!
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
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
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.
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.
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
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
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.
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 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
@@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.
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
