Dockerizing a React application with Nodejs Postgres and NginX | dev and prod | step by step

[@codeching]

If you really liked this video, now you can say thank you with the 'super like' button as well, you can find it under my video! Thank you for watching this :)!

[@Ray47nl]

I really love your tutorial! I had some problems setting up the client. I am using react 18 and i had to change some things in App.js to make it work: import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; And also:

[@codeching]

Thank you that you shared it! It will be useful for others.

[@vitaminez85]

hi, thanks for the video 'd like to ask if there is a way of running both client side and server side in the same docker Container ? or it's mondatory the run them in seperate containers managed by doker compose ? thanks

[@codeching]

Hi, yes of course you can run a backend and a frontend in the same container but it's not recommended and Docker was not intended to do something like this. The performance optimization is optimal if you run them separately. However you can run both of them in the same container and you can expose their ports to the outside world if it's neccesary. Also you can use an inside nginx to put them on the same port under subpaths.

[@AKASH-sw9bs]

Your tutorial is good for those who already know docker and nginx but dont know how to glue all these things up in production. Good job. Carry on

[@codeching]

Thanks! :)

[@AlexanderPoznanski]

Thank you!

[@tudor14]

Great tutorial so far. I have one question - why do we need the client/nginx/default.conf for production? Can we not just do this: COPY --from=development /usr/client/build /usr/share/nginx/html.

[@codeching]

Thanks. It could work if you just overwrite the index.html there (and copy all the files) and you're ok with the basic nginx configuration. We're creating a new configuration here where you could set many things. I haven't tried just to overwrite the html but it could work however I think it's a better solution if you create an own nginx config too where you can set up things e.g. port in my case. Usually in normal prod we're using port 80 but here I set 3000 inside nginx config just for demo purpose.

[@tudor14]

@@codeching Thanks for that. That does make sense. And I've finished the other video with K8s (which was fantastic by the way) and I have another question: Lets say we only want to expose the client route to /, and not expose the server under /api like we do in the ingress-controller. How would we achieve this?

[@swagz6440]

Is there different configuration doing this tutorial with vue.js because i followed up to this point and I am getting bad gateway. My backend is working but my frontend doesnt seem to expose the port 5173

[@nitinmungilwar659]

Great man really helps me ❤

[@codeching]

Thank you! :)

[@jaylenpatterson611]

Hi, Great video and very informative! I'm having an issue when we run docker-compose up --build though. It loads the nginx page instead of my react app and I cant figure out why not?

[@codeching]

The development one or prod? In prod we have 2 nginx config, one for routing and one for HTTP server, check both. Also check the Dockerfile of the client, does it build the React succesfully? But I guess it's something about nginx configurations.

[@onewizzard]

hmm...maybe you can change the speed on the KZbin menu control. if at .50, and still too fast. maybe it's a you issue because I watched this 2.00 and this video was fine.

[@codeching]

Hi, there is no speed problem here.

[@ערןאוצפ]

great tutorial, one thing i didn't understand was the point of the rewrite

[@codeching]

Thanks, it's just a rewrite. So when we map the whole application to /api then it could be required if in your application you have route only e.g for '/cars'. When we call /api/cars, then it will call /cars on your application.

[@luisjavier5224]

Oh man. you go too fast it's difficult to follow you

[@codeching]

Thank you for watching! :) it's a video, maybe you can pause it any time.

[@stockholmsyndromeself-trea7517]

@@codeching And I paused many times indeed. It's very informative I did learn a lot.

[@onewizzard]

hmm...maybe you can change the speed on the KZbin menu control. if at .50, and still too fast. maybe it's a you issue because I watched this 2.00 and this video was fine.

[@AugustoMontagna]

Thanks for the video! Great explanation. I feel Im missing something though. When you present the architecture, there is an nginx for routing, I dont see the production version. Is it the same as for local? regards

[@codeching]

Yes, in prod we have 2 nginx config, one for routing and one for HTTP server to serve the HTTP content. I'm speaking about it from 27:16

[@roopamchakrawarty682]

Thank you..Very helpful Video....Can you make more videos like this.please

[@codeching]

Thank you so much! I will do my best in the future too :)

[@user-kw9cu]

excatly what i was looking for

[@unzi876]

awesome explanation. thank you💯💯

[@codeching]

Thanks! :)

[@admondtamang4119]

Great content. can we also use pm2 with nginx or nginx will be enough for load balancing?

[@codeching]

You can use anything that you want :)) But I think nginx could be enough. We are using it in real envs. Of course when we moved to Kubernetes environment, there is an Ingress loadbalancer there above it.

[@ugurgunes95]

Thanks for the video, I've learnt a lot. I hava a problem which is cors policy. When I tried to register from my front end I see The same origin policy error all the time. I've tried so many configuraitons but still the same. Any suggestion? Have a nica day!

[@kag3670]

Thank you for your tutorial, I have a question, I have cloned your project and trying to start it, I am using windows and my hot reload is not working, when I make changes and save it reflects inside the container, but no reload happens, not on the front nor on the server.

[@codeching]

You're welcome! Yes, I updated the source code of docker compose file. I added CHOKIDAR_USEPOLLING environment variable with true value to the client. In case of React application (Created with CRA) it's the way to restart the application inside the container when we save the code in dev environment. However, the volume is also important, but it's already set up in this project. In case of node js it should be working because the Docker file set up start script "nodemon" already.

[@lovers_valley]

so efficient coding

[@colbyberger1881]

Under rated video. This was really helpful!

[@codeching]

Thanks 😊!

[@hemanthshankar4520]

is there any way to achieve this without using docker-compose

[@codeching]

Yes, there are many ways, but this is the good in docker compose, you can run everything together and it has numerous advantage.

[@ganapathisubramanyamjayam]

Saved me

[@codeching]

Good to hear :D

[@nithinkamineni9392]

in Nginx file you mentioned "proxy_pass client" "proxy_pass api;" but where are you actually mentioning the urls or ports like this? eg: server: container_name: nanomedicine_server restart: unless-stopped image: nanomedicine-server-image:1.0.0 build: context: nanomedicine-backend target: production dockerfile: Dockerfile ports: #outside:inside(container) - 8080:8080 networks: - shared-network depends_on: - postgres

[@edisonraulbarreirozambrano4519]

Great video, Sir. Thanks for all the shared info.

[@codeching]

Thank you! :)

[@dinamohsen9768]

what if we we use webpack as http server for react?

[@codeching]

The stack of the applications doesn't matter from the Docker aspect.

[@rauldeandrade]

Great video. I really appreciate the content. Great job!

[@codeching]

Thank you for your response!

[@Zentamusic]

Thank you so much. I was having some trouble configuring nginx proxy requests to the backend in a personal project of mine but looks like this tutorial clears it up. Thank you

[@codeching]

Very good to hear if it helped for you :) You're welcome!

[@Ramesh140789]

I'm getting 404 from nginx ..if I reload the page

[@tyeasir]

this was very helpful, thank you

[@codeching]

You're welcome! :)

[@cetinca]

On the playlist the order of the video 7 and video 8 could be changed. It will make more sense if Kubernetes is after docerizing the app.

[@codeching]

I tried to edit it but it's hard because I have multiple videos about these topics :) The order is not so important because the videos are mostly random and not all are built in top of the previous one. But I tried to order it a little bit now. Thank you for your response!

[@cetinca]

@@codeching thank you.

[@Play_Streams]

Great videos, very well explained concepts.

[@codeching]

Thank you so much!

[@aruezechukwuebuka7868]

I tried this but whenever I run "npm start" for the client it compiles successfully but nothing shows on localhost:3000, please any idea what could be wrong?

[@codeching]

It could be lot of things. E.g. wrong port mapping, wrong front-end (not running), wrong port for your front-end application, wrong nginx config etc. I can't help you in this in detail sry.

[@ajaygangarde]

can access front end:- localhost:3050/

[@Lindaine]

Why don't we setup nginx for the api as well?

[@codeching]

At 23:33 we set it up, or what do you mean?

[@codeching]

If you are talking about the production stack, there in case of client we do that because we would like to serve a static html and we are using nginx as a HTTP server in that case. For node it doesn't required, because we are using node server. But in the global Nginx config we put our node application behind /api route.

[@Lindaine]

@@codeching I see, thanks!

[@Lindaine]

@@codeching How about sockjs-node in nginx? I don't understand why it is there

[@codeching]

@@Lindaine It's used to make the web sockets connection be able to connect to dev server., This is the devserver proxy path if you would like to use it. The webpack sends the update messages through a socket to hot reload.

[@bagabaya5956]

Thx so much for your work!

[@mohamedyoussef8835]

Awesome video +++++++++++ 🙂

[@codeching]

Thank you! :)))