how to initiate your own react app in just 30 seconds using docker

hello to you wonderful person watching me in youtube this is another tutorial where i'm going to be showing you how to initiate a react app in just 35 seconds or maybe less using docker so i'll do it right now if you think it could be helpful to you please stick around to the rest of the video so i can explain it further and make sure to show some love and subscribe to that channel without further ado let's just i have my time here so boom new folder it's empty i have to just make sure i was a second to show you this guys but i'm confident of that you know so this is my container this is the daw and let's just open the folder just in case so you can see i have already the app it's not done yet wait a second and hmm three two boom that's it took us 30 seconds so just so uh just so i can show you alice we have the app inside so let's open the app and run npm start and the cool part actually there's two cool parts one you don't have to install all the dependencies because i have set that in the docker file so everything is installed and the second part as you can see we don't have the loading logo of the react application so this is actually pretty cool because every time i do npx create react app which is by the way last time it took me about four minutes to just do that and like i have a pretty decent actually good machine so it took me four minutes to do that and now if we can jump to the project and open it as you can see i've already filtered it so it's a clean project there is no other setup and test and all of the files logo svg and even the index so you can have your own um starter react application your own version and just pull it to your local file system whenever you want so i already have my react application here guys whether i created with npx react app or just how i showed you before with docker let's do a chord dot using the terminal and to the work project so first of all we need to build a docker image and in order to do that we need a docker file so let's create a docker file here in the root um path so you need to start with capital d yeah and then dork file and what we need to do is tell it that from the node image all right so this is pretty much an image in the docker hub and the alpine virgin when we do this alpine when we do this it's for the virgin so i can just like say uh virgin 8 or whatever but let's do the alpine version and we need to set the work directory which is going to be app and then we need to copy the package or actually let's use a wildcard so package dot json wildcard because we have two files and we need to copy them to the new directory which is going to be the and then we need to run so we basically tell it what we needed to do when we built the image so npm installed to install the dependencies and then copy everything to the directory we want and last thing what we do when we want to run a react application well you guessed it it's the npm start and you actually need to do it like this in an array so this is how we do it and that's pretty much it for the docker file let's do another file uh which is the docker ignore so i know you need to put a period in front of it so yeah docker ignore and let's just put the node models so docker ignore and that's pretty much it we can exit and we are here in our directory now what we need to do so i am in my directory in the react app directory so if i want to refer to this directory i use dot as i used up here code dot then i open this so we need to build an image right now using docker image build dash t and then my username which is moody omars and then slash the desired name that i want for the application i'm just going to call it a react app yt youtube tutorial all right and now dot which is this directory i want this directory to build like this image from this directory and now it's gonna recognize the docker file it already did now it's gonna build my image this might take few seconds or minutes i'm not sure if so i'm gonna cut it let's just give it five seconds so i have the ability already and yeah guys it took more than five um it took about like maybe one or two minutes so anyway i should have mentioned this earlier none of this guys will work if you didn't have the docker application open here so i have the docker app running in the background so if the docker app is not running in the background this is will not work and also you can see the image that we just built here which is this react app y t and also you can obviously view it from the terminal by typing docker images and this is that image id this is our um image id so what we need to do right now well we can run it and test it but what we need to do i need to push it to the docker hub in order so we can pull it and also we can use docker cp so we can copy it to our um local file system actually let me just have another tab here so we can use it um later so this is the docker hub i'm gonna put it here to the side and now let's just use docker push and my username all right and then slash and we called it react app yt so as you can see i don't have it here in the docker hub and now i'm going to push it and it's pushing so we have pushed the the image to the docker hub so if you do here refresh as you can see you can see the react app yt now if we make a refresh here we should see the react app yt and this is it so first of all you can use this command um the not not the docker push we use the docker poll in order to pull the image to our machine so obviously i have it and you should too because you build it in your machine so if you make if we make docker images we will see the react app yt so this is pretty much it we have made the app that we wanted and then we have made the docker file so we can build the image we have built the image and then we have pushed it to docker hub now we have it if we are in our machine we can just use the image id to create a container if we are on another machine so we just docker pull our image there and then we do the steps that i'm about to do now and that we have done at the start of the video at the beginning of the video so let's make a new folder right here and let's call it test all right so if we open the folder i know it should be empty about just to clarify so let's um let's make a container out of this image which is the react app yt so docker run and this is our image now if we use docker ps we can see that six seconds ago we have started uh the the image and now we have a docker container for it so we're going to take the docker container and the comment that we are going to use um i'm actually in the test folder so let me just clear this controller l or just clear so i'm going to use the docker cp command which is i have a snippet here ready for it so i'm just going to put the docker container name and the local destination i'm not going to hit enter i'm just actually i'm going to explain it so it's just there's not much to explain it's just the docker cpu command which is copy so we can copy it to the file system and the app if you if you remember in our um docker file we have set the work directory as app so this is what we want and period the dot this is actually the directory that we want the destination let's say so if we weren't in the test folder we were to um type their path here so let's just hit enter and assu i don't know if you saw it but we already got the app here and it's still processing and this should take about a few seconds and now um you can just easily that's it we have the app here let's just um let's see the app oh npm start and now that's it that's the um that's the project we made we should have yep hey we did it so that's pretty much it sorry if i weren't so clear at some points or if anything like weren't really helpful or i don't know just please let me know like pretty much talking to 10 viewers right now so i really hope uh that was helpful to you and please make sure to just support the channel and subscribe if it were otherwise please just leave a feedback tell me what to make better tell me i'm stuck anything just let me know so that's it have a great day

Channel: Moody Codes

Views: 14

Keywords: docker, create react app docker image, react, copy docker image, download docker image, docker react, react docker, build docker image from react app, full stack development, web developer, web development, docker tutorial for beginners, docker explained, docker in react, how to create docker image and container, react.js, react.js tutorial, docker tutorial, docker cp command

Id: C9WdymDQOgo

Length: 10min 42sec (642 seconds)

Published: Fri Sep 24 2021