Docker | How to Dockerize a React application (Beginners Guide)

This is a docker tutorial for beginners. Take your first steps with Docker containers with React. In this tutorial we are going to Dockerize a React application as a complete beginner to Docker. We first Create a new React application then Prepare a React app for Docker building a Dockerfile. A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. Now we go ahead and Build a Docker image and then finally Start a new Docker container to display React running in our container.
######
Spot the mistake?
Is Alpine a slim image?
What is the difference between Alpine and Buster? 👍
######
00:00 Introduction and underpinning knowledge
Code Repository:
github.com/ver...
🐱‍🏍Would you like to SUPPORT US FURTHER so that we can make even more great content - Please consider joining our members community.
/ @veryacademy
👍SUBSCRIBE to get more free tutorials, courses and code snippets!
/ @veryacademy

[@pgallovich]

This series keeps getting better and better. I love this channel. Learning so much and exactly what I needed for Docker. Thank you!

[@veryacademy]

You're very welcome! I will keep it coming.

[@georgiod9]

This is all i can ask for, very concise, clear and straight to the point. Solved all of my issues, thanks.

[@SoloPython]

I see a angel among us! Thank you so much zander!!

[@veryacademy]

👍

[@rangabharath4253]

Congratulations on 10k subscribers. More to come 👍 🎉🥳

[@veryacademy]

Thank you so much 🤗

[@siyayat]

Waiting for next Django and React tutorial 👍👍👍

[@austonlim5836]

This tutorial is great! Straight to the point, no fluff!

[@ahmedabdelgawad2684]

Loved every lesson I've watched so far.

[@Peamceout]

The way you taught this was very easy. Thanks for this.

[@veryacademy]

Glad it was helpful!

[@PraisPranav]

I fed up trying... Your video was too helpful.. it will help me in next assignment

[@veryacademy]

All the best

[@muhannadalulaby8727]

Thank you so much for such a great and amazing tutoril. Just one question here which is, how can one have the setup in a way where it is possible to continue developing and working from within the docker container? So accessing the requirements and the rest of the setuo can still be posdible?

[@fatemazohra8354]

Awesome as always, zander!!

[@veryacademy]

Thanks again!

[@ipdmartins]

Thank you, it worked perfectly for me.

[@adriangonzalez7857]

Awesome channel dude

[@veryacademy]

Hey, thanks!

[@rangabharath4253]

Awesome as always 👍😀

[@veryacademy]

Thanks again!

[@fabiangctube]

Hi, can the port mapping be done without the compose file? Is the docker compose mandatory if I have only the react app to expose?

[@sagarkudu3123]

Thanks!!!

[@TreeLuvBurdpu]

Very good. You give a hint at adding a node_modules cache, but no clue how to start?

[@giannifed]

thank you sir.

[@veryacademy]

Most welcome

[@matiasalvarez6533]

Why not copying only the build files?

[@veryacademy]

No particular reason. This is just working towards the idea of containing React

[@jasonhuang4333]

Should we add .dockerignore file to ignore node_modules ?

[@akhillshetty4082]

Zander!! Can you combine this with containerized Django backend and React Frontend?

[@veryacademy]

Up next

[@nileshnayak5291]

I am getting a node_modules/.bin not found error .. any idea

[@nguyensam8288]

I don't quite understand, I think docker will help us not to prepare the environment to be able to write code, like in the video you have to install node to be able to use npm, so what does docker mean in this case? ?

[@veryacademy]

Hi Nguyen, sorry for the confusion, I made this as a first look at how to use docker with react, thinking about starting to prepare react for deploying or running a react app in docker. I made it this way also as it was a request from a community member.

[@nguyensam8288]

@@veryacademy It seems like every tutorial on the net has a react project available but it doesn't say how it was created when the os doesn't have node js. Can you make a video to show how to create a react project with a node image?

[@veryacademy]

So to confirm, you want to develop react in a docker container so that you don’t need to install node on your machine?

[@nguyensam8288]

@@veryacademy Yes sir, is that posible?? Cuz im try a hole day but still not get any result. It seem my request only fit with new member join a team, but not the one create react app. Im try to pull a node image and build a container from it. And i fail in step 2.

[@veryacademy]

You can build a react app without node, but you will need node resources to run and package react. Building it in a docker container is possible but, is there any reason why you can’t install node?

[@MarkAlterBridge]

I'm having issues getting the container to bind the port (localhost:3000 isn't available) even when using -it and doing npm start i can see it started up fine. I tried turning off windows firewall but no difference, any ideas of some steps to take around windows 10 docker + port forwarding? Also trying to understand why you use 'RUN npm run build' vs 'RUN npm install' surely the CMD npm start isn't making any use of the CRA build output within the container?

[@veryacademy]

npm install: installs dependencies, then calls the install from the package.json scripts field. npm run build: runs the build field from the package.json scripts field.

[@sanjamsinghkalsi5937]

Hi there! first of all thanks for the video..just a small query, the error at 16:01 how can we fix this error?

[@veryacademy]

Had a quick look - not sure...

[@lorenzonannini1685]

npm not installed. Why?

[@hasibuzzamantonmoy8845]

First!

[@oauth9728]

Seconded! No doubt the content always super. Happy viewing. Yet to subscribe? You're missing

[@veryacademy]

Love the dedication - thank you!

[@ErikBurdett]

Hi Zander, this is a great video and really helped me with a project. I'm on to setting up a git actions CI pipeline that I need a Docker container to run a command with - Do you have any videos or resources you could point me towards?

[@pawnstar8771]

Hey thanks for the video. I have a problem though- When I make change in App.js in react it does not reflect on localhost. Can you please help

[@dima6488]

Look up docker volumes

[@pawnstar8771]

@@dima6488 I am no more a frontend dev now 😂

[@dima6488]

@@pawnstar8771 Figured I'm probably late to the party but posted for anyone else in the future :)

[@sunnypepple6571]

it appears this is for production

[@veryacademy]

Just a bit of pointing in the right direction 👍

[@debugpro]

your voice is so low