How to create and run a Docker image for your React application
Created and recorded by Aman Chhina. June 2021
1. What we will be doing today.
2. Recap of last video and point to it.
3. Creating our docker file.
4. Creating our dockerignore file.
5. Building our image.
6. Running our image on the specified port and local volume storage.
7. Summary.
How and Why To Install Docker - • What is Docker and How To Install it ...
How to Install Your First React Application - • How to install React from scratch
In my last video we went over how to install Docker and the benefits of using it, so if 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 here, and the reason we want to use Docker is to containerize our applications so that we can streamline the build process and ensure they run as expected in different environments. Again, if you would 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. So let us start by creating a react app using `npx creapte-react-app`, if you want to get more familiar with this. Please watch one of my previous videos in which I show you how to create your first react application. You can find the link to that in description below.
Okay now that we have setup our react application, let's go inside the project folder and open it in our IDE. We can start the application by running `yarn start`. If we now open the browser to localhost 3000 we can see our application running. Let us now move this application to a docker container. We first start by creating a dockerfile. In this file we will create our docker container layer by layer, and I mention the layer by layer part becuase if 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.
We first define the base image we are going to use, and let us use the widely availble node:current-alpine, in this base image we are installing a very lightweight distro of linux alpine that comes bundled with node, which we need to run our react application.
Let us then specify the working directory for our container, which we will use as let us say /app, this is equivalent to if we just were to run `cd app` in our container. Now we copy our package.json and lock file, to our container and then run `yarn install` before copying over all the contents in our project to the container. The reason we do this separately is because of the layers I mentioned earlier. We are less likely to install a new node module frequently, so these layers should not change often and as such we can use a previous cached state and speed up the build process. If we didn't do this then every single time we made a change in the src code we would have to re install all the node modules to update our image.
Finally, like we mentioned earlier we copy over all contents of the project into our container and then run the command ['yarn', 'start'] and this will start our react application. So great, if we were to build and run this image we should be able start our container. But before we do that we should have a .dockerignore file in our directory as well and this is again to speed up the build process, we can see here that we're installing all node_modules every time, and we don't need the dockerfile in our container workspace we just need to it to set up our container. This way we can only have essential files in our docker container. So let's get that set up now.
Now if we run `docker build -t react-image .`, this will start building our image. Once it's built we can now run it using `docker run -p 3000:3000 react-image`. Once that gets up and running if we go to port 3000 we can see our react application. Note though, if we were to make any changes in our App.js file these won't be reflected in the browser like they normally are with react apps. This is because the container is using the files it had copied over into the container and these do not have the active changes in them yet. To specific a local volume storage while in development we can pass -v volume argument when we run our container. Which would be `-v $(pwd):/src:app/src` and this will mount our src files as the storage volume in place of the app/src files. Now if we make changes in our App.js we should be able to see these changes reflected in browser as well. Let's add a p tag and take a look.. and there we go we can see our active changes and we have now setup docker to use during local development.
Just to recap created our docker image, added only the relevant files to the image, and ran our image with a local volume storage so that only those changes were reflected. If you guys found this video helpful please like and subscribe, and tune in next time when I show you how to set up and run multiple containers using docker-compose.
