How to create and run a Docker image for your React application

[Music] hello everyone today i'll be taking you through creating and running a docker image for your react application in my last video we went over how to install docker and the benefits of using it so you have not watched that yet i will leave a link to it in the description below to recap quickly we want to have the docker desktop application installed that you see in front of you right here and the reason we want to use docker is to containerize our application so that we can streamline the build process and ensure they run as expected in different environments again if you'd like to hear in more detail for this please check out my last video before we begin to containerize our application we need an application to containerize so let us start by creating a react app um if you have not created your first react application before i have a video that goes through doing that i'll leave a link to the description below so to start by creating our react app let's go into the command line and from here we can create our react application by typing in npx create a react app and let us call it docker react app as the auto suggestion hinted now this should take a couple minutes for it to get set up and build now that we have set up our react application let's go inside the project folder we just created and open it in our ide we can do this simply by just typing change directory and name the application we created docker react app i press tab to auto complete and now we are inside the project and let's open it up in our editor i'm going to use code period to open this up in visual studio code the peer just symbolizes opening up the current directory okay now that we have our project open let's open up the left hand side go to app.js and this is more or less what's going to be rendered when we start our react applications just the boilerplate so let's open up the terminal and here we can start our application by just typing in yarn start and now this has opened up the development server taking a little while to spin up so let's just move this over to the right and let's move over our ide to the left so to begin containerizing our application let's actually stop the development server here and now if we reload here we should give us a connection issue and let's start by setting up a new file there you go we have to call it docker file for docker to be able to automatically detect the file if you give it a different file name we can pass in the tac f flag and then specify which file we want to run when we're running our docker commands so in this file we will create our docker container layer by layer and i mentioned the layer by layer apart because there are any changes then when we rebuild our container only the layers that have a change will be updated and this speeds up the build process significantly so we first defined the base image this is just going to be the starting point for our docker file or our container i should say let's use a widely available image so we're going to say from oops from node and then current alpine so in this base image that we're installing it's a very lightweight distro of linux alpine that comes bundled with node and we need known to run our react application so let us now then specify the working directory for our container which we will use let us say um so the worker command and let's just say it as app what the worker does is basically just change directory into application if that folder does not exist it creates it now what we're gonna do is we're going to copy the contents of whatever is inside package.json the star just means match anything after a package so this package lock just package into the current folder we are in in our container which in this case here would be application and then finally once we have that we just want to run yarn install we can also do npm run install the reason we do this separately because the layers i mentioned earlier we're less likely to install a new module frequently so these layers should not change often and as such we can use the previous cache state and speed up the build process this means steps one through five generally speaking if you make a change let's just say app.js don't need to be recompiled or rebuilt i should say if we didn't do this and every single time we made a change in the source code we would have to reinstall all the node modules to update our image and you guys saw the first time we install our node modules it takes an extra minute or two so we'd have to put up with that every single time we wanted to start our container finally like we mentioned earlier we copy over all the contents of the project into our container so then we just do copy dot dot that means copy everything from where we are when we execute our docker run command into everything that is inside of the current working directory of the docker container and then finally to get our application up and running we just do command yarn start great if we were to build and run this image we should be able to start our container but before we do that we should have a docker ignore file because you can see some of these contents in this folder don't really need to be copied over to our container for example node modules we're going to be installing that fresh whenever a change does happen in node modules so there's no reason for us to copy that over so let's create a docker ignore file right and then let's just have like all files that are not required in our build right and let's close this here so we can kind of see this better that can be uh docker file right because we need the dockerfile to container to create our container but we don't need a docker file inside of our container same goes for the docker ignore again this is just needed to ignore certain files when we're creating our container same with the get ignore and then we want to ignore all the artifacts that will be built during image creation for the time being this is just going to be node modules and that's mostly because like we mentioned earlier node modules will be created when we are creating our image so we no longer have to copy that over now that we have that set up we can continue to starting to build our container so we should have everything ready to go to start creating the image so we can do docker build tac t the t just means tag of the image name so in this case let's call it a react image and then period for right here so now to start building the image and this should shouldn't take too long but the larger the image files you use the longer it will take okay so that took a couple minutes to build and now we should be able to run the image that we created and we can do that by typing in docker run and then we want to pass in rm here the reason we want to pass in rm is when we stop our container this will delete the container in the processes so it makes our cleanup easier we also then want to pass it a port so the reason we pass it apart is because we want to be able to communicate with our container by default we're not able to do that so we want to be able to communicate to the port 3000 on our end and correspond that to the port 3000 on the container's end and the reason we're using 3000 is because react app.js by default will connect to that port and then after that we just follow it by the name of the image so in this case react image let's press enter and now it's going to be starting our development server on the container now if we come here and we refresh there we go now we have our react application running on our docker container so it's great that we got our app running but we can notice something interesting here at least for development purposes let's open up our app.js and right under learn react let's say we type it learn react v2 and if we save it we don't see those changes on the right hand side let's reload it for good measure but still we don't actually see those changes and the reason for that is in our container the source code for app.js hasn't changed because we copied over all the contents on our file system to the container but now when we make a change we're just making a change to our local file that has not been copied over to the container for development you can imagine this getting very annoying every single time we introduce any change and we want to see that change actively on the right hand side we have to rebuild our image and that's just not particularly feasible so how do we combat that let's begin by first stopping our docker container so let's open up another one on the terminal i mean right let's make this full screen so it's a little easier to read and let's type in docker ps now this is going to show all the processes or the containers that are currently running and we can see image of the react image and then container id there so we type in docker stop and then the name of our container id b0 um we don't type in the full container id name it's just gonna do a match so as long as it's a unique match it will match and of course we need a space there you go our container is stopped so getting back to our original question of how do we combat this what we can do ideally is we want our container to point to our local source folder which are usually going to be the files we are most likely to change like app.js app.css any other components any other files that you frequently change it during development we want to point our container to our local files for those and we can do that by setting up a local mount a bind mount for volume storage and what we're going to do is we're going to connect appsource to our local mount and we can specify that when we run our container so we can do docker run let's keep remove there as well too because we want the cleanup to happen automatically once the container closes attack p we still want our port 3000 on our machine to respond to port 3000 on the machine of our container now we're going to pass in an additional flag we're going to do a pwd here this basically gets the working directory path right and the reason we need to do this is because the volume storage mount it requires of absolute path so you can figure out what your absolute path is but usually this is going to be an easier way to do it so an absolute path to the docker react app and then we want to specify the source folder to mount and we want to make sure it's only the source folder if we mount the whole volume storage then it's just going to take whatever that was on our volume and everything we read from there and essentially there wouldn't be much use of our docker container and we want to specify app because that's what we called our working directory and then we want to say source because that's going to respond to source inside of our container and then we also want to pass it read only the reason we pass it read only is this means the container can only read on our local volume storage but it can't write to it generally speaking the container wouldn't write to files but we don't even want to give it the option to do so this is more of a security check and a safety check and then finally again pass in the image that we are going to use so now this is starting it should take a couple minutes so there you go now it's running if we reload our page we should see down here learn react v2 but what if we make some more changes learn react v3 we save it and we can see now even though our react application is running on our container it is responding actively to the changes we are making in app.js and this is going to be great for development and we have now set up docker to use during local development so just to recap what we've done through this video we created our docker image we added only the relevant files to the image and ran our image with a local volume storage so that only those changes were reflected so hopefully you guys found this video helpful if you do please like and subscribe and tune in next time when i show you how to set up and run multiple containers using docker compose

Channel: buckmasterinstitute

Views: 583

Keywords:

Id: w6jnDjp5czg

Length: 14min 18sec (858 seconds)

Published: Mon Jun 07 2021