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

hello my name is xander welcome back to another docker compose tutorial in this tutorial we're just simply going to dockerize react a box standard react application we're going to start a react application dockerize it and we go through the process the basic process here to dockerize a react application and then just run through docker compose and how we can do the same thing with docker compose as a single container this tutorial will lead us into the next tutorial where we start to dockerize react and django together so if you are new to this docker series you're going to need docker docker compose installed so go ahead and install that from the docker website here we're running react so we're going to need node to npm and create a react application and of course we're going to need a code editor so i will go through the code as if we've not seen it before or kind of semi seen this before of course i'm kind of assuming maybe you've seen the other tutorials in this series so you've got a general idea what's going on to quickly run through what we're going to do here then we're going to build a react application create a docker file create a docker image and then run that image in a docker container therefore we would then have react running in a docker container we then take that one step further and create a docker compose file and then go ahead and do the same thing again but this time with volumes so that we can mirror the volume from the container to our local machine so we can work from our local machine but of course then it gets updated in the container and then obviously the container is running the at the react application and then will show as normal in your browser if you look in the code repository that's connected to this video in the video description you'll find a commands text here i put all the commands that we utilize so there'll probably be some more that we're going to add here as we go along but first of all we're going to mpx and create a new react app so you're going to have need to have for example node installed here so if you haven't already got that here i'm windows i'm using windows here so i've downloaded node of course and i'm now running mpx to create a new react app so let's call this app uh core for example so we'll let that go ahead and build our react application so if you're new to react you have to remember here that we've created our react application within the core folder here so we just need to in windows here just change directory to core so just make sure you've done that right so anything else now we're going to be doing within this core folder so we can test to see if there's work in npm and then start give that a go so that should start our application and then show us in the should open up a new window if you're using chrome automatically okay so you can see that's working so now what we're going to do is get this to work with in a container so the first step is to create a docker file so capital d lowercase f there's no file extension here so just a docker file so our base image here for our react application we're going to install the official node or use the official docker node image and just take a look again if you're not familiar with this is a docker hub where all the official images are placed which we can utilize so here we're going to run what 15.13.0 i'm going to choose the alpine version so slim down version so let's go ahead and do that first so there we go so that's the the image that i'm going to utilize as the background operating system for my containers so on this operating system say i want a folder where i'm going to place my application i'm going to call that core i'm going to match up with my folder name here where my react app is based and then what we're going to need to do now is map across the environment path for the node modules so that's going to look a little bit like that okay so here we're going to create a path to the node modules on the server so the path is going to be dot slash and then node module so inside of core here and there'll be a new folder on the server node modules okay so with that in place we are now going to copy across everything here over to the server because remember this holds our our react application here so let's go ahead and do that and then lastly last of all sorry um let's go ahead now and run npm so we're going to copy this across and run npm build now you might be wondering why there's no point because you're coping everything across yeah that's the case but in that case you get the idea here of what potentially is going on so we're going to for example if we don't if we don't send across the node modules over to the server and run npm run build that's going to look then in the package json files and look for all the dependencies so if you're familiar to django for example you know this is the pip install requirements so this is the same type of setup here but with packages for react so we can go ahead and run those and build those so last of all then if we want to get the actual everything up and running of course we're going to need to start the server by typing npm start so we'll create this command here mpm comma start that will then start the server so this is basically a kind of a very lightweight minimal baseline configuration for just getting your application from your local machine into an image and then onto a container and started so let's go ahead and control c and just close that server right so now what we're going to do is obviously build this so the command is here so here we're going to use docker build and then we're going to tag it with react so we're going to give it a tag of react and then the dot at the end referring to this folder here so make sure you're in the core otherwise this isn't going to work so this is going to build an image from the information that we've provided here in our docker file so that will probably mean that the image will need to be downloaded this image here and then go ahead and make a folder set up the environment path here and copy across all these files here in this folder and then run the npm run build so that's what it's doing now and there probably isn't too much that needs to be done there um because we're assuming potentially that we're just copying everything across and then finally we're going to run the final command here um npm start so obviously what we've done now i say obviously what we've done now is we've built an image here it is now this isn't running at all so we haven't actually started container and placed the image in the container and started it yet but when we do that what's going to happen is this command is going to run it's going to start the server so let's go ahead now and start so what we can now do for example is just start the server so docker run react so what should happen now is a container should have started it's um coming across the image and spinning it up and now it's running so we can clearly see it's running so apologies uh here for the docker sorry um so we can clearly see it's running here so what we can now do is test it in our browser again now it's likely this isn't going to work because we've forgotten some of the commands but i just want to show you this is the case so when we refresh here it's looking for it can't find it so the problem is here is that let's remember that react uses port 3000 so we're going to need to cross map across at some point that port so we can do that using the run command so let's just uh close down this container i'm just going to manually remove uh this container here why not okay let's go back so let's run a command a run command that potentially also includes the port numbers that are going to be needed to map across the container to our machine so we can actually access port 3000 in our container and therefore access our new react app so this time what we're going to do is we're going to bind our computer's port 3000 to the containers port 3000 and that's the default port that when we run react it runs on that port in the container so i'm just going to map that across and that's going to allow us then to when we type in the the correct url or domain name for react here that's going to take us directly to our container and show our react application so let's go ahead now and utilize this that should spin up a new container here we go you can see here it says port 3000 so let's go back into our browser here and refresh and there we go so we now have react running in the container so what we can do if we go into our containers on the left hand side here we can see a live just a quick easy way of getting into the container if i type in ls you can see that these files here represent or copied across from my application here so that's where those files come from because i copied them across so here copy dot dot so dot referring to this directory dot referring to the directory on the container so let's now convert this to docker compose so here we're just going to run the one service with docker compose so we're just going to swap this over and maybe expand upon this later of course in the next tutorial like i said we're going to run react with django so this is obviously going to come in handy this information so let's just start off by making sure we're in the core new file docking pose yaml file yml so that's our docker compose if you're not if you're new to dock compose here is simply let's just think of it as a way of describing multiple services so here we've just got one service which is uh just spinning up react so with docker compose we're going to create multiple services eventually here we're just going to have the one which is going to be in this case a simple react application so let's go ahead and write this out so we start off again assuming that you've seen the previous tutorials we start with the version so this is the version composed version so have a look at the manual if you're not too sure about that so i'm just using the latest version so now we're going to describe our service so we've got service and then we want to give this service a name i'm going to call this app as per normal and then we want to basically just set context here oh one second we want to set the build options uh here we're just going to say context dot so here essentially we're just referring to the fact the docker file is stored here there we go so now with that in place let's set up a volume so if you're new to volumes volumes are basically a way of mapping across our container directories onto our computer here and what we're going to do is set up this simple volume here we're just going to map from dot so this is this directory here our working directory we're going to map this directory across to colon so this is somewhere on the container the core okay so let's remember that we're going to create a working directory called core and place all of our code inside of that in the container so we're basically just going to map across from that container to our local machine here so anytime we make changes here to these files it will then just get updated on the container now if we were to delete the container remove it all the files here will be persistent within this folder structure here which is stored on my local drive so if i were to spin up a container again then this would just get copied across to the new container whatever i've updated it to so now we can go ahead and think about what ports we're going to need so we know that um react use by default 3000 so let's do that of course you can change that change the settings well means and then we can just go ahead and tag the image app react excuse me right and then we can name the container so container name is just going to be called react container and then we're going to run a command at the end so this command here is going to be npm start so that's going to start the server okay there's two little typos here one there needs to be a colon after the context here and two there needs to be a space right here apologies for that so those are the two mistakes now it's always good to have mistakes it will tell you here in the terminal there'll be some good information that's provided to guide you on where the mistakes are so normally is a typo there's a small issue and that's just going to maybe cause you problems and like i said once you start running the build it will then indicate whether there is a problem with the file it's quite good in visual studio code here so docker compose build now so let's build the image okay so finally then let's go ahead and run the image now it's being created here so we tagged it as react so let's go ahead and just run dog compose run and then app okay right so that should take a couple of seconds to get all started but once it's done the server should come up and we should be able to then access it via our browser again here of course we don't need to describe the ports because we already have them in place in our script here okay so that could take some time now eventually you will get to the point where you can now see that the core is should be viewable from the browser and it should be the same thing again localhost 3000 so let's just go back in refresh looks like it's connecting and we seem to have a problem so you should have a problem too so let me just explain what's going on here right so we've created and started this container i did suggest to you that we've already described this port binding here but sorry in the doc compose but what's happened here is we've utilized npm run and we've run i think off top of my head you need to explicitly define the ports here right when you use a run command so if we go back into the container here you can see that there is no port binding described here so what needs to happen here is that you'll need to just close this down and let's now just uh just for the sake of let's just remove the container um and go back to image okay so the image is fine so now let's run for example docker compose and let's just use up okay so run that command inside of this folder here it's going to find the dot composing docker file so you can see now there's a container has come up as per normal it's running and this time you can actually see the binding so you just need to be careful of that when you're running um the docker compose up so the run that you need to explicitly define the port that's just a common problem i see with students not forgetting to do that it's an easy one to fix once you've done it a few times you won't do that again so you can see that the container is coming up as per normal again that's going to take a couple of seconds and then it should be ready as per normal and there we go so we just go back to the browser we open logos 3000 we've now made the network bind through the 3000 ports and our app is running so in addition to that let's just go back now because we've made this volume we just happened to make the volume the same name as our normal folder so let me just show you that uh so you can see this volume here so we're mapping across the volume from the container to our localhost here so let's just create a new file here called test.txt right so i'll make a new file here make sure it's in the core folder that's being mirrored across so let's go back into our container so i'm just going to open up the cli here on the right hand side just to make it easier and quicker to do and i'm going to type in ls to list all the files here and folders and you can see here a text.text is there so everything is being copied across if i were to make a file here it would then be copied across to my local machine and so on so you can see that if i did now close my container everything should persist all my data will be persistent on my local machine and this is a way another way of working if you want to run from within a container obviously here there may not be much benefit just running like this as a docker container but obviously once you add more services et cetera then it becomes a little bit more beneficial potentially particularly if you're going to run this on a local machine so there we have it docker react so of course there's many other ways of setting this up this was just really an introductory tutorial to get started utilizing react and docker and you can see there's a few things that needs to be done in order to get react working and obviously if you understand react you understand the packages and the folder structures of course what i didn't show you for example is that what we can do now is go ahead and because we don't want to copy across docker compose and docker file for example over to the server or into the container so we could create a a simple file of course a docker ignore file so let me just drag an example in here dot docker ignore here you can just select what files you want to ignore so docker ignore docker file um you could add docker compose to that of course so set up your docker ignore file if you don't want to move across now another thing that i didn't mention more advanced here is that this type of setup you're pretty much mirroring the node modules across so you probably want to set up a cache or cache depending on what world or how you pronounce that word um in your settings or when you use the docker run command so that it doesn't take as long it just speeds up the process of getting your react application started at least to begin with thank you very much for listening like i said in the next tutorial we'll expand this and then move into docker plus django and have a look to see how that plays out in a docker compose file thank you very much please like and subscribe and hopefully i'll see you in the next tutorial

Channel: Very Academy

Views: 11,055

Keywords: docker, docker compose, docker react, dockerize react

Id: xtllpDEOw4w

Length: 19min 56sec (1196 seconds)

Published: Mon Apr 05 2021