Docker 101 - Dockerize your React app and serve your build artifacts through Nginx

🔥 Today's topic 🔥

Full hands-on tutorial about: How to put your React App into a docker image, run your app as a container and finally serve your static build artifacts through a Nginx webserver, which of course, is also dockerized.

#docker​ #dockertutorial​ #cloudversity

Feel free to ask any questions in the comments down below and give me your honest feedback.

⏰ Timestamps ⏰

0:00 Agenda & Intro
0:26 Pre-Requisites
2:25 Create React App
4:56 Create a Dockerfile
9:30 Build React Docker image
11:40 Run the React App in a container
12:55 Create a Dockerfile for production
16:45 Comparison of React and Nginx Docker images
19:15 Like and Subscribe

🔥 GitLab Repo 🔥

🔥 Support 🔥

[roniceyemeli]

As a junior really this is helping me, after an interview, the recruiter advised me to learn docker, I got any idea about it so and realized that it's very important, I started to read and did online courses, but this topic was still terrifying me, practically this is the first video I watched till the end on youtube about docker, definitely I'm your new subscriber. so please don't forget to cover more fundamentals for us beginners, btw if you have some good documentation it will help a lot.

[mattsmith]

Great video thanks. I've watched a few on this subject and yours is the clearest by far. Keep up the good work.

[stefaniecarolin]

Hey CloudVersity, thanks a lot & keep up the good work :) This tutorial really helped me through the process. No questions open.
In addition, for me it would be helpful if you pasted the commands in the description, so I don't have to rewatch the video to find them again.

[CloudVersityOfficial]

I just recognized, that I linked to the wrong Twitter profile in this video :D

🔥 Social Media 🔥

[nikitamingaleev]

Hey, thanks for the video, but with that nginx setup if you have multiple routes in the app and you go to some route and refresh the page you will get 404. To fix this an nginx.conf is needed.

[shaheerkhan]

Good video 👏
Please upload higher quality next time

[CloudVersityOfficial]

Let me know, if you have any questions or if you want me to cover a specific topic in one of the upcoming videos :)

⏰ Timestamps ⏰



0:00​ Agenda & Intro
0:26​ Pre-Requisites
2:25​ Create React App
4:56​ Create a Dockerfile
9:30​ Build React Docker image
11:40​ Run the React App in a container
12:55​ Create a Dockerfile for production
16:45​ Comparison of React and Nginx Docker images
19:15​ Like and Subscribe

[MuhammadSaeed-sutk]

Thanks brother, but can you please make complete series on Kubernetes and docker?

[fazalmehmood]

Why did you stop making videos ? You are probably one of the best teachers out there on youtube. Hope you did not die or something.

[sourabhvaishnav]

its just 5 minutes of the video I have seen, and I'm all confident to HIT/SMASH/BLOW the LIKE button. I am also dying to SUBSCRIBE the Channel which I will do by the end of the video, coz I want to be extra sure about the channel...
Hope this video teaches me DOCKER FINALLY... kudos Cloud Versity

[helloWorldPlus]

Helloo, when you say a static page do you mean a landing page? What if I want to host in the server a dynamic webpage that interacts with the user? Also how can the port of Nginx be changed to the domain? What else should be considered to deploy a real web application with nginx? Thanks!

[eliswerekio]

Hello I have a question.. This docker production file, is it any different from docker compose ? / better ? Because I have seen other videos with docker compose instead so I am a bit confused now..
Thank you for the video, I learned a lot !

[richardkirigaya]

My build fails at COPY --from=builder /app/build /usr/share/nginx/html with the message "failed to compute cache key: failed to walk lstat no such file or directory". Any ideas on how to fix this ?

[sivanandan]

After running docker im getting error ERR_EMPTY_RESPONSE