Serve a React app from an Express server | React frontend and Express API setup in 1 project!
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- React and Express are the most popular web framework stack. Many developers create their React and Express projects separately. This means that you have to host 2 different projects: a server, and the static react site. But ExpressJS is a server that can serve static files. So with a little bit of setup, we can serve your React app from your Express app from 1 project.
The github repository: github.com/jgbijlsma/react-ex...
00:00 Intro
04:13 React app setup
10:47 Express app setup
17:27 Problem: React fetch from API
24:30 Solution: serve static react app from Express
29:17 Rendering the data
31:33 The other problem: development environment
34:52 Solution: proxy - วิทยาศาสตร์และเทคโนโลยี
![ตีสิบเดย์ [FULL] | คู่รักแซฟฟิก "หลิงหลิง-ออม" จากซีรีย์ "ใจซ่อนรัก"](http://i.ytimg.com/vi/zs8AfphGn2w/mqdefault.jpg)
Finally!!! someone who explains the actual use case for react and express
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!!
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!
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.
Amazing, thank you- building my first project with the two- super helpful
Thanks a lot, really well done, one of the best tutorials I've ever seen!
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!
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.
Thank you a lot sir, you definetely are a life saver!! My boss cannot yell at me now
Really Appreciate it man. Literally Saved me.
thank you, exactly what I was looking for
Excellent video
It's really what I was looking for, great
Wonderful, thank sir it was very helpful
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
This is gold! Thanks
Thank you dude.
this is amazing, thank you so much !
Excellent video content.
thanks for the video
Great video, thanks a lot
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.
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?
yeah. I need this.
Awesome ! Just the thing I was looking for. But could you tell me, if I can do the same with NextJS and NodeJS (ExpressJS)?
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
great video, thx
Thanks a lot !!
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
I love you bruh 👍
Thanks 🙏
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.
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.
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.
thanks.
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.
Niiiice
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
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.
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.
how to deploy this into the vercel
I have the same problem, how you do this ?