[0:00]Hello everyone. In this video, we're going to do a hands-on from start to finish on how to convert an application into an image, then into a container, and finally run it. So, as usual, I'm going to use the calculator application, as you already know. So, I'm opening my Visual Studio Code. This is my calculator application project. It's a very simple project for you to understand. It has only two files: one HTML file and one JavaScript file. Okay, I have the files. This is a calculator application. Okay, to run this application, what do I need to do? There's a command: node server.js. server.js is the name of my file. node is a tool that I use to run my JavaScript file. Now, if I run it, my application runs on port 5000. I've mentioned this in my code: it should run on port 5000. Okay, now I'll take this URL. If I put it in a browser, the calculator application will run. This is how I've run an application normally, without Docker. Okay, what do we need to convert it into a Docker image? We've already seen in our videos that we need a Dockerfile. Okay, I'm going to create a Dockerfile now. Here, I'll click "New File." There are certain rules for creating a Dockerfile, as I've already mentioned. Its name must be "Dockerfile," with a capital 'D,' and the rest of the letters must be lowercase. Okay, you can see that as soon as I gave the name, the Docker symbol appeared automatically. Okay. We've already seen in the video how to create a Dockerfile. The first command we're going to give is the FROM command. I'm typing "FROM" and then, what base image am I going to use? My application needs Node, so I'm going to use the Node image as the base image. So, I'm going to Google and typing "docker node image." I need version 20 for my application. I'll click on the first link here. Here, you can see "docker pull node." "node" is the name of the image. After that, everything here is versions. We can use any version we want. So, I'm thinking of using this 20.19.2 version, or just 20. This 20 is available, so I'll use it. So, I'm typing "FROM node:20." With this command, we've specified a base for our image, okay? Node 20 is the base image for my image. Okay. What's next? I need to create a working directory, right? I'm going to move my project into that working directory. So, "WORKDIR /calculator." I can give anything. I'm giving "calculator." Next, I have two files: one HTML file and one JavaScript file. These two files are needed for my application to run. So, I need to put these two files into the Docker image first. So, I'm using the COPY command. "COPY calculator.html." Into which folder within the image should I paste it? I need to paste it into this calculator folder. Since I've already specified the working directory, whatever I copy next will be pasted into this folder. So, I'll just put a dot. By this, I mean, copy the calculator.html file from my local system to the working directory inside the image. That's why I'm using a dot.
[4:27]Okay, now I need the JavaScript file too. So, what I'm doing is, "COPY server.js" and to paste it, I'm putting a dot. This will paste it into the same working directory. Okay. Now, my application runs on port 5000, as I mentioned, right? This JavaScript code here runs on port 5000. This is only visible if you look inside the code. If I give this Dockerfile to someone, they won't know which port it runs on when they create a container using it, right? So, for that, we're using the "EXPOSE" keyword and giving "5000." This is just for information. It doesn't matter if you give it or not, as I've already said. This is for information. Okay. Last command. We've copied everything. We already saw which command I used to start the application: "node server.js." This is the command I used, right?
[5:30]So, I'm putting this inside the "CMD" command. Now, this is a single command. But we have to separate it. We have to give each command separately. Here, I'm giving "node" separately. I'm giving "server.js" separately. Now, what we've done is, we've created a Dockerfile to create our image. That's all. Simple. Okay. Now, using this Dockerfile, I need to create an image. First, we need to open the Docker application. I've already installed it, so I'm opening it. As you can see, it says "Starting the Docker Engine." Now you can see that our Docker Desktop has opened. On the left side, you'll see many tabs: Containers, Images, Volumes, Builds, etc. Now, you can see what containers are there, what images are there, etc. through Docker Desktop. We can also see it through CLI, meaning Command Line Interface. You must definitely know the word CLI, which means Command Line Interface. That is, not through a UI, but through a command prompt, that is, through a terminal. Through this, we can also see. Now, for a simple example, I'll show you something. Now, how many images are there? "calculator" and "postgres" are two images. We can see this through UI, that is, through Docker Desktop. Or through the command line interface. For that, we need to know the commands. Now, I'll put a simple command: "docker images." If I type this, you'll see that it shows "calculator" and "postgres" here, and it also shows "calculator" and "postgres" here. So, you must mainly learn this command line interface. You need to know that everything done through commands can also be done through this desktop. But in a real application, when working on a production server, we won't have a screen like ours, or a mouse. We can only give commands through the keyboard. That's why we need to learn this CLI, Command Line Interface. Okay, we've opened and seen the Docker application. Now, we can build our Docker image. We already know how to create an image using Docker. There's a command for that: "docker build -t." What name do I want to give to my image? I'll give "calculator-new" because there's already an image. So, I'm giving "new." Now, where is this Dockerfile located? The Dockerfile is inside this "Calculator" folder, as you can see. Actually, this folder is the same as this folder. So, it's in the same folder. So, what I'm doing is, I'm giving a dot. I'm telling Docker to take it from your folder. Now I'm pressing enter. Now, as you can see, the Dockerfile is building. This will take some time because it's downloading over the internet. It will only take time the first time. I'm doing this for the first time, so it's downloading. If it's already on your system, it won't take this much time. It will just use the existing image. It's taking time because it's downloading new. After that, you can see that after the image is downloaded, the working directory has been created. Then, both the calculator.html file and the server.js file have been copied. Everything has happened in order, and the image has been successfully built. Okay, now how do we check if the image is built or not? We already know the command, and we also know how to see it through the application. We'll see both. I've opened the application. Now, if you look at the Images tab, you'll see the "calculator-new" image, which was created just 39 seconds ago. Its size is 1GB.
[9:41]Because we used Node, it's about 1GB. The same thing, we can see through the CLI, meaning the Command Line Interface. We already know: "docker images." If you type this, you'll see the "calculator-new" image. It was created about a minute ago. Okay. Next, what do we need to do? We need to create a container from this image. Okay. We can do this through the desktop, or through the command line interface. But the best practice is the command line interface, which I recommend. If you want to learn, you can learn directly through this. But if you want to work on a real-time application, then the command line interface is the best. Okay. I'll open the command line interface. Command line interface is nothing but your terminal. Your command prompt. Okay. Now, I'm typing "docker images." My image is there, the image ID is there. Now, what I'm going to do is, I'm going to create a container. To convert an image into a container, there's a command called "docker run." So, "docker run," and then the port. This is important: -p. Which port do I want to run my local system on? I want to run it on 9002. Okay. Then, a colon, and then which port is the application inside the container running on? We've already seen in our code that the port number we've given is 5000.
[11:27]So, that's the port we need to give here. That's why we use the EXPOSE command. We're giving that command in the Dockerfile. That's why we're giving it here. Okay, now the port mapping is done. Next, we need to give a name to the container. This is important; make sure you give a name. If you don't give a name, it will give some random English name, and we'll doubt if it's our container or not. So, what I'm doing is, I'm giving --name and then "calculator-new-app" as a dummy name. Now, which image am I going to run? I'll give that at the end. I'm giving "calculator-new." If there's a version, you can give the version. For example, if there are many versions, you can give it. If there's no version at all, if you don't give any version, it will automatically take the "latest" version. So, what I'm doing is, I'm running it. Now, my container is running. I can go and check it. If you look here, you'll see a new container called "calculator-new-app" has been created. This is mapped to 9002 of my local system with port 5000 inside the container. Okay. Now the container is running. If I access port 9002 on my local machine, the calculator application should appear. Shall we try it?
[13:08]Localhost 9002. Now the calculator application is running. The one I ran earlier, at the beginning, was without a Docker container. I ran my application directly. Now, I've converted my application into a container, run it, and this is the output. Okay, we've finally created a Docker container. Let's see what's inside this Docker container. This is my Docker container. Now I'm clicking on this Docker container. As you can see, there's a "Files" section. I'm clicking on this.
[13:54]Now, this is the folder structure. In my videos, I've said that there won't be an OS, but there will be a folder structure. That's what this folder structure is. Now, let's see if the commands we gave earlier, to create a working directory and copy two files into it, have worked. If you look now, a working directory called "calculator" has been created. I'll open it and see. calculator.html is there, and server.js is there. Both files have been copied. Okay. Now, what is Docker Volume? Let's see that too. Now I'm in the Volumes tab. You can see if there are any volumes on your system. Right now, I don't have any volumes. So, I'll create a new volume. The command to create a volume is simple: docker volume create. Then, you need to give a name. I'm giving "simply_volume." That's it, the volume has been created.
[16:26]To check if it's created or not, give "docker volume ls." If you give this, it will show you what volumes are on your system. Okay, now I've created the volume. Now, I'm going to attach this volume to my container. Actually, you can't attach a volume to a running container. Now, I need to attach it to this container. But since this container is already running, I can't attach it. So, what I'm doing is, I'm stopping the container. I'm deleting it. Now, the old container is deleted. I'm again creating another container. This is the docker run command we already gave. How do we attach the volume to this? It's simple: -v. Then, we need to give which volume we're going to attach first. I created a volume called "simply_volume." Is the name correct? Let's check. Okay. Now, which folder within the container am I going to attach this volume to? I'm going to attach it to a folder called "mukkiyamana_folder." Actually, you need to put a slash in front. Only then will it take the folder. Okay. Now, this Docker is running with this volume attached. Okay. Now what I'm doing is, I'm going inside the container and checking it. A new container has been created. I'm clicking on it. I'm going into files again. Now, there is no folder called "mukkiyamana_folder." Okay, I'm creating an important file inside my container. Okay. I'm going to create it through the terminal. These are Linux commands. For this video, you don't need to know this. So, just assume I'm creating a file. Now, if I do "ls," my calculator.html and server.js files are there. If I do "cd /", then "ls", you'll see the root directories. If I do "mkdir mukkiyamana_folder," it creates the folder. If I do "ls," the "mukkiyamana_folder" is there. If I do "touch mukkiyamana_file.txt" inside the "mukkiyamana_folder," it creates the file. Okay, now I've created a file. I'm opening files again. Now, an important file is created inside the important folder. Okay. Now, if I delete this container and recreate it, let's see if this important file and important folder exist.
[18:43]I'm stopping the container. I'm deleting the container. Okay. Now, I'm running the container again from the beginning, but with the volume attached. This is the docker run command. I'm running it again. Okay. Now, I'm going inside the container again. I'm clicking on it. I'm going into files again. You'll see there's no important folder, and there's no important file. This is because this file is not inside the container. It's inside the volume. That's why even if the container is deleted, this file is not deleted. Okay. Now, this file, I don't know where it's stored. Docker is managing it. My requirement is that this file should be saved in a folder called "mukkiyamana_files" on my computer. If I want that, then I need to use bind mounts. How to use bind mounts is simple. Let's stop this container. Let's stop it and delete it. I'm also deleting it. Now, what I'm doing is, I'm running the same volume again, but with a bind mount. Now, I'm going to link this folder to the volume. I'm going to link this "mukkiyamana_files" folder to the volume instead of the volume itself. I'm linking it with this folder. Now, what I've done is, I've linked my local system's folder to a folder inside the container. Now, the container is running. Okay. Now, I'm going inside the container again. I'm clicking on it. I'm going into files again. Now, there's nothing inside the important folder. Okay, there's nothing at the beginning. The same thing, if you look inside my local system's important files, there's nothing. Now, what I'm doing is, I'm creating a file inside the container. And let's see if that file automatically appears here.
[29:00]I'm going to my local system's files. I'm opening files. Now, I'm in files. Now, I'm creating a file. I'm using "touch mukkiyamana_file.txt." Now, I'm refreshing files. I've created it. The important file is created. Now, if you look here, it automatically appeared. Now, I can use this file. Before this, when I used a volume, I didn't know where the file was stored. But now, I can use the files inside the container as well as outside the container. Similarly, if you create a file here, let's see if it goes there. So, I'm copying and pasting. Now, I've created two files here. Now, if you look here, that file also appeared here. So, this is double direction. If you create it here, it goes to your local system, and if you create it in your local system, it comes here. This is bind mount. Okay, now, how to push this? There's a way to push it. First, we need a repository in Docker for pushing. We need to create that first. I'm going to Google and typing "docker hub." I'm opening Docker Hub. You'll already have an account, or you can sign up now. I'm signing up now. It's asking for a name. I'm giving "simplybyte." It's checking the username. It's available. I'm clicking "Sign Up." I've created an account. Now, I'm going to Docker Hub. Now, I think the UI has changed. It was different when I first saw it. Okay. As you can see, what we need is to create a repository. So, I've come to the Repositories tab. Here's "Create a repository." So, I'm clicking on this. It's asking for the repository name. The repository name should be similar to your calculator application's name. I'm giving "simplybyte-calculator" as the name. It's asking if it should be public or private. I'm giving public. Mostly, they use private. Some people, if they are working on a real application, they won't let others use their application. So, they keep it private. I'm currently using public for learning purposes. I'm giving public and clicking "Create." Now, we've created a repository. The repository's name is this. Okay. Now, if I want to push my image to this repository, what do I need to do? I'm typing "docker images" and looking at my images. Now, I need to change the tag of this image according to my repository. How to do that? "docker tag" and then the name of the image. After that, what tag am I going to give? This tag: I'm copying it and pasting it here. Now, what will happen is, this image will be created as a new image with this name. Shall we see? Okay, I'm typing "docker images." Now, you can see that initially, there were only three images. Now, there are four. This image is created as another copy with a different tag name. You can see the same size, everything is the same, but only the name has changed. Now, if I want to push this image, what do I need to do? I'm typing "docker push" and then this tag name. If I give only this tag name, it's enough. Now, what will happen is, the image I'm going to push will go to the "simplybyte" account in the "simplybyte-calculator" repository. As you can see, it's pushing. This will push through the internet. So, it depends on your internet speed how long it takes. If the internet speed is fast, it will push quickly. Mine is slow, so it's taking some time. Now it's pushed. Let's go and check if it's pushed or not. Now, I'm going to Docker Hub, my repository. I'm clicking on it. Now, if you look, an image has appeared. "Pushed less than a minute ago." So, our image has arrived. Now, if anyone asks for my image, I'll just send this. I'll just send this tag. They'll type "docker pull" and then this tag, and it will download. That's all, friends. We've seen everything from start to finish. Those who are watching this video, don't just stop at watching. I've put my Docker image in the public repository, right? I'll add the tag of that image to the description. What you do is, pull that image on your system and run it. Then, check if this calculator application appears for you or not. If it works, definitely comment. Say "I worked on it." If you like this video, like, share, and subscribe. Definitely subscribe to Simplybyte. Thank you.
