Docker for Beginners: All about Images, Containers and how to publish them. How to use React JS with Docker.

Docker for Beginners: All about Images, Containers and how to publish them. How to use React JS with Docker.


Introduction to Docker:

  • The docker is like a lunch box, where we add not only the food (code), but also sweets and other side stuff (other dependencies) to taste right.

  • it doesn’t matter where we eat this lunch box office desk, garden, etc, everything is set up just like we thought while making it.

  • Docker is an application where we encapsulate the development, packaging, and execution in one place, that to in a unified environment.

  • In docker, there is an independent system of its own where we just add our files and dependencies, and it has its run time environment and operating system.


Why do we need docker, what is the use?

  • Consistency across the environment - It ensures that the application or web app runs the same on any device, either my computer or your computer, etc, everyone is using the same command to run the app.

  • Isolation - maintains clear boundaries in our app and dependencies, no more clashes, more like a compartment and bifurcation.

  • Portability - It makes it very easy to move our app to any condition, like we can move to the development stage easily, and then to testing with the same files. no more hassle, docker containers are used in deployment also, and reduces load.

  • Version Control - just like we can track our version of apps using git, we can do that in docker as well, we can return to the previous version easily

  • Scalable - We create copies of the same app so that it can be used among various platforms at the same time. it's like making multiple copies of the same menu in the restaurant.

  • DevOps Integration - the gap between development and operation is now gone, one software takes care of development, testing, and deployment at the same time.


How does Docker work?

It works on 2 main concepts, IMAGES and CONTAINERS.

  • Images - it is a lightweight, executable package, which is needed to run a piece of software. It is like a recipe of a dish, it provides us with code, libraries (things needed) and runtime to execute them, and system tools (instructions on how to use them).
  • Container - We will have to run this image somewhere right, so we will run this in a container, which is a runnable instance for executing the images. Provides an execution environment. The image is a menu and the final baked dish is the docker container, the final instance made using an image, sets the Environment for running applications like downloading resources and dependencies, etc.

  • We can run multiple containers using a single image, with

  • Network - Creates a connection between containers, or with any external server, allowing to share resources among the containers, take the example of cooking stations where every station has different meal cooking but there is one particular host administrating them. And they share info without any problem.


Docker workflow

  • Docker Client - It is the user interface that is used for interacting with docker, its the tool we use to command things we want to get executed, it is like the chef of the kitchen giving instructions to the cooks.

  • Docker Host (Docker Daemon) - Background process for managing client, it gets the command from the client and manages images and containers, handles other docker-related tasks. It is like a master chef who does not cook but overviews all the tasks that are being carried away.

  • Docket Registry (Docker Hub) - It is nothing but a centralized repository of Docker images. This is like what Git is to Git Hub. This contains all the information about things required for building containers, etc. It is like a cookbook or recipe library, where we find different.


Creating Docker Images

  • We create the image by first using the docker file, it is a set of instructions telling docker how to build your own image, take it as a docker lang, or docker’s diff syntax, here are some commands :

  • FROM - specifies the base image to use from the New image, picking an image from the already built image, like picking a kitchen that has already some of the ingredients.

  • WORKDIR - sets the working directory for following instructions. Specifies the path., and decides where in the kitchen you want to do the cooking.

  • COPY - Copies the files or directory from the built context to the image, it is like bringing your favorite tools to your side of the kitchen.

  • RUN - executes the commands in the shell.

  • EXPOSE - tells docker that the container will listen to specified network ports at run time, it is like saying out loud - I am going to use this part of the kitchen.

  • ENV - they set the environment variables during the build process, setting the mood.

  • ARG - defines the build time variables, having a note that can be changed before cooking.

  • VOLUME - creates mount point for external points, creates a space if something external needs to be added.

  • CMD - provides a command to when the container should be started.

  • ENTRYPOINT - it is like the menu dish that people will see and order, and after that, you will make it.


Docker Demo:

  • first, we used an Ubuntu image from the docker hub (explore)

  • after that, we added a folder, opened vs code, and added this command docker pull ubuntu.

  • following that we saw in the docker desktop an image was created

  • now to run that we used the docker run command.

  • now a new container has been made using a Ubuntu image.

  • We are using Ubuntu commands on Windows, wowowo

PS D:\\docker-demo> docker run -it ubuntu
root@67312dac8f3d:/# cd home
root@67312dac8f3d:/home# mkdir hello
root@67312dac8f3d:/home# ls
hello
root@67312dac8f3d:/home# cd hello 
root@67312dac8f3d:/home/hello# touch hello-ubuntu.txt
root@67312dac8f3d:/home/hello# ls
hello-ubuntu.txt
root@67312dac8f3d:/home/hello#

Creating our own Docker Images

  • we have created a folder, and files, now inside the dockerfile we will write the docker code.



  • Image is created


  • Now let's run/containerize it :


  • if you go to the docker desktop, we see :

so many files and an app file that we created, that has our files inside it.


Dockerize React app

  • First, we create a react app using vite, but we do not install the dependencies using npm install, we will do it using images.

  • so we create an image :

  • and this creates an image, you can see this on the docker desktop.

  • after this we have to host this, so we map the local host and create the app with safety so that no external source can access it.

  • now we run the image, also we will map the directory that is in our system to the directory present in the container.

  • so we use it, and now our local code is linked to the container.

docker run -p 5173:5173
  • the pwd, tells the current working directory path, -v creates a volume where we can store our data, which keeps track of changes that are happening.

  • another -v is for node modules and creating a new volume is imp for ensuring volume mount is available in the container, the changes will be linked to this module, and we will now need to run again and again.

-v "$(pwd):/app" -v /app/node_modules react-with-docker
  • you can now see that this is running on local host 5173, and the changes will be reflected easily.


How to publish Docker Image :

  • First we cd to the folder where we have published image

  • after that we login by saying

docker login

  • Now for publishing it, we use
docker tag react-with-docker anshulsondocker/react-with-docker
  • Now push the image to Docker Hub, and it will look like this :
docker push anshulsondocker/react-with-docker

Now see the Docker desktop and you can see in the images section :

See in the hub section as well, you can see the image :

You can also view this on the Docker hub website : (Published)

You can also update according to your preference.


What if I tell you that, you don't need to create an image again and again, but use a single command?

This can be automated using DOCKER COMPOSE :

  • It is a tool that defines and manages multiple containers at once for our purpose. It uses a YML file to configure the network, volumes, and services for our application.

  • Before this, we needed to run 10 different commands for 10 containers or files. Now all we need is a single command.

  • We can list our requirements in a single file and make the execution easy.


Using Docker INIT :

  • create a react vite project and open the terminal

  • now type docker init

  • Now answer the questions and it will create a YML file for you automatically.

  • it will ask you questions like, the node’s version, etc just see the image and you will understand

It has created a Docker file for you :

The YML file :

This is how we have reduced the -v coding part that we added previously

Now write docker compose up :

the process started ……..

and then you can simply see the local host :)


Follow for more tech-related blogs.
Follow my socials - https://bento.me/anshul-soni