Serve a React app from an Express server | React frontend and Express API setup in 1 project!

Рет қаралды 16,149

Күн бұрын

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

Пікірлер: 60

@PLAY_Arcade 2 ай бұрын

Finally!!! someone who explains the actual use case for react and express

@richgreen9123 3 ай бұрын

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.

@AwesomeCadecraft 2 күн бұрын

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

@juggernaut4lifeps3 7 ай бұрын

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

@HaiNguyen-qx8eq Жыл бұрын

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!

@peterventon4935 3 ай бұрын

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.

@gamingbud926 Жыл бұрын

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!

@s-9965 Жыл бұрын

Thanks a lot, really well done, one of the best tutorials I've ever seen!

@davidtemidayo8541 4 ай бұрын

Amazing, thank you- building my first project with the two- super helpful

@BlueSky-fj7yi 4 ай бұрын

Thank you a lot sir, you definetely are a life saver!! My boss cannot yell at me now

@din0toxic 7 күн бұрын

Thanks for this wonderful tutorial

@user-fb8yw8yt8n Жыл бұрын

Really Appreciate it man. Literally Saved me.

@filipf1421 5 күн бұрын

Thanks Man!!! You are the best! :))

@kevinsilva5966 8 ай бұрын

It's really what I was looking for, great

@filltofill 9 ай бұрын

thank you, exactly what I was looking for

@aakarshanraj1176 18 күн бұрын

Excellent video

@RainOnline Жыл бұрын

this is amazing, thank you so much !

@rustee_nyfe Ай бұрын

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

@ShivShankar000 10 ай бұрын

Wonderful, thank sir it was very helpful

@badbrain02 28 күн бұрын

This is gold! Thanks

@akilagiritharan2454 5 ай бұрын

Excellent video content.

@NihilVidere 4 ай бұрын

Great video, thanks a lot

@msahyilmaz Ай бұрын

Thank you dude.

@moseswasswa9997 13 күн бұрын

perfect explanation..

@bigbadcatbigbcy2933 2 ай бұрын

thanks for the video

@Lunolux 5 ай бұрын

great video, thx

@rainerfischer5838 9 ай бұрын

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.

@mdabdulaziztanvir 3 ай бұрын

yeah. I need this.

@vijaybaskar2862 3 ай бұрын

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?

@darkexcalibur2999 3 ай бұрын

Awesome ! Just the thing I was looking for. But could you tell me, if I can do the same with NextJS and NodeJS (ExpressJS)?

@jayantseth9184 Жыл бұрын

Thanks a lot !!

@leader6422 Жыл бұрын

I love you bruh 👍

@aajn88 Жыл бұрын

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?

@vijaybaskar2862 3 ай бұрын

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.

@DilshadNirmal 4 күн бұрын

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

@step2point975 Жыл бұрын

Thanks 🙏

@tghhh19 Жыл бұрын

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.

@rubenmartins6564 7 ай бұрын

I have the same problem, did this solution help you ?

@tghhh19 7 ай бұрын

Sadly looks like Next.js or maybe Remix would be the easiest ways to achieve this.

@exe.m1dn1ght 4 ай бұрын

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

@hai_xena 4 ай бұрын

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

@adithyakiransekar Жыл бұрын

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

@vijaybaskar2862 3 ай бұрын

he does not have the express server folder inside the react. He has the react build folder inside the express server folder.

@pyyrr Жыл бұрын

thanks.

@Masteruve1 3 ай бұрын

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.

@vijaybaskar2862 3 ай бұрын

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.

@jjoksa Жыл бұрын

Niiiice

@AvdhootSawant-kz3ly 8 ай бұрын

what if react have multiple routes using react-router-dom , How server will respond to client side routes

@duztv5370 5 ай бұрын

Please have you found an answer to this question?

@usamarajpoot7403 4 ай бұрын

plz reply

@tafaxtra Жыл бұрын

What if our react app has react router? How will the pages route? I am using vite

@ilyalakhno2850 Жыл бұрын

not as expected :(

@AnnieUllyot 6 ай бұрын

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

@vijaybaskar2862 3 ай бұрын

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

@primordial-jf3nz 11 ай бұрын

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

@vijaybaskar2862 3 ай бұрын

only the index.html file will be served to the browser. The back end code will not be visible from browser.