Containerize Your Creativity: A Step-by-Step Guide to Running Your Web App in Docker
Simplifying Web App Deployment with Docker: A Comprehensive Tutorial

A little bit about Docker
Docker is platform that uses OS level virtualization to deliver software packages in containers. What used to happen is that when a software has to tested in DevOps the developers had to download the software and its dependencies on their machine, a simple software could have lot of dependencies (e.g. Databases, Frameworks etc.) & each machine type had their different installation method. This was a really tedious task then came into picture virtual machines. Virtual machines partitioned the storage, CPU, RAM and other resources of the host machine in order to run a Operating System. Using virtual machines any OS can run on any machine(in context of computers). Hence developers started using VM's.
But the problem with VMs was that they consumed a lot of resources from the host machine and if the application running inside them needed less host machine resources it won't happen because VM has already partitioned it. This caused wastage of server/host machine resources.
To solve this problem came into picture DOCKER. Docker didn't require a whole new OS to run the Application on host machine, instead it utilizes host machine kernel and packs all dependencies and application files into a controlled isolated environment called CONTAINER which dynamically utilizes system resources. Dynamically means that it can free up and consume resources based on it's requirements, hence utilizing system resources to maximum. To learn more you can visit docker official documentation.
Running simple web app on docker
In this section we will see step-by-step process to run your very own web app using docker. For this purpose I am using my Weather app project which was made using JavaScript, HTML, CSS.
Pre-requisites : Docker installed on your system(Docker engine + Docker Desktop).
Now let's start the journey.
First open the project folder in any of your preferred IDE - I used VS Code.
Once the project is open you need to create a docker file of your web-app.

A docker file is one from which docker image is produced and container from the image.
Docker file contains your application as well all the dependencies(required frameworks, databases etc.) which are required to run your application.
After you've created a docker file now you need to edit the file in a way that docker image can be created form this docker file.
Building a docker file

Now let's explain this:
Step-1 : Getting the parent/base image
FROM - Every docker file begins with this instruction. This instruction specifies the base image/ parent image from which we are building our application. Remember container is isolated environment means initially it is empty, so we need required dependencies to be installed in this container. In our case we are building a weather app which is web application so we need a Web server in order to run the weather app.
In our case we will use nginx as the web-server. Here comes the first line of docker file.

Base image: Our application has to run on some sort of dependency, in our case the dependency is a web server so the base image will be of nginx web server. After nginx we have written :1.27.0-alpine , now what does this mean. It specifies the tag (or in simple terms version) of nginx that we want to use for our application. When the docker file will run on machine the FROM will lookup the docker hub to find the specified docker image. In our case its :1.27.0-alpine . Docker hub is an image directory managed by docker community itself.
You can get the image and its version information from docker hub website.

Step-2 : Copy project files

In this step we used COPY instruction, this instruction takes two arguments SOURCE and DESTINATION. Source where the files are located and Destination where these files will be copied.

The reason we have to COPY the files is that the container is isolated, it means it will have it's own file system with the installed dependencies within it and the reason it is isolated makes host machine file system invisible to it. That's why we need to COPY the files of our we-application form our filesystem to container file system.
In our case the source is the current directory which has all the files and current directory path is represented by .
Destination is /user/share/nginx/html this is default location from which nginx serves files. Every docker image can have it's own default file serve location. You can check that on google or documentation of the base image.
Step-3 : Port
Port or port number is a unique number that identifies a connection endpoint and redirects data to specific service. By default nginx runs on port 80.

By default all applications inside docker runs on isolated docker network. SO in order to access our application on local machine we will go through this step
Now we use EXPOSE instruction to expose the nginx default port which is 80 to outside environment when the container will run.
The reason we are doing this is that if the port where data is redirected is exposed we can bind that exposed port to another port so that data is received on the bind port. You'll understand this when we will run the container for this docker file.
Step-4 : What do to when container starts !!
CMD instruction tells the container what to do when container starts after building.
Usually CMD is the last instruction to run that starts the application.

Read the comment out text carefully. Now what does ["nginx", "-g", "daemon-off;"] argument mean. It means that when the Docker container starts, it will run the nginx web server with the global configuration (-g) - it means all configuration - set to daemon off;. This tells Nginx to run in the foreground rather than running as a daemon, which is the standard behaviour for services in Unix-like systems. Running in the foreground is often preferred in Docker containers to keep the container process alive, as Docker containers are designed to run a single process in the foreground.
Running as daemon ???? - Running as a daemon means that a process runs in the background, detached from the terminal or user interface. Daemons are system-related background processes that often start at boot time and remain running until the system is shut down. They do not have a controlling terminal or user interface and typically perform tasks like waiting for events or requests to occur and then responding to them.
In the context of web servers like Nginx, running as a daemon allows the server to handle requests without requiring a user to be logged in or maintaining an open terminal session. However, in Docker containers, it’s common practice to run processes in the foreground to keep the container alive and to allow Docker to manage and monitor the process directly.
Now our docker file has completed let's jump to next step.
Building a docker image
Building a docker image is really easy, just open up the terminal in your IDE or system terminal. I used VS Code terminal, but the commands are all same on all machines.
First navigate to the directory which has your docker file and application files in case you use system terminal. Otherwise your IDE will open terminal in the directory you're working on.
The docker command you'll use is -
docker build -t weather-app:1.01 .
Let's understand this command, docker build tells docker engine to build a docker image, using -t flag to set the image name to weather-app. You can set any name you want.
:1.01 specifies the tag for your image, this tag is same as the tag that I explained in base image/parent image. I didn't use tag myself but it's a good practice to implement.
Finally at the end we have to add those files of which docker image we want to build. In our case the current directory holds all the files, so we will use .
Now hit enter and wait for sometime until the build is finished.
If any error occurs in meantime check the docker file for any typos, your application files.
After the build is finished we need to check if docker image is built or not.
For that use docker command docker images , it will show all the available docker images.
If you see the one with name weather-app - user specified name, congrats your docker image is built.

Now the docker image is built now time to build a container, so let's go.
Building docker container
A docker container is built on a docker image. To understand relation between docker image and container, you can think of them as docker image is a class in object oriented programming and container is instance of that class.
When the image runs a container is automatically built.
Use the docker command
docker run --name weather-app-on-docker -d -p 8080:80 weather-app
Let's understand this command
docker run runs the specified image,
--name weather-app-on-docker sets the name of container to weather-app-on-docker . Remember it is the name of container not the image as previously mentioned.
-d flag in Docker commands stands for “detached mode”. When you run a Docker container with the -d flag, it starts the container in the background and does not attach the console to the container’s input/output. This allows you to continue using the terminal while the container runs in the background.
The container will start, and you’ll immediately get back the control of your terminal. You’ll only see the container’s ID as output, indicating that the container has started successfully.

To check if our container is running use the docker command docker ps to list all the running containers

If you see the image name, congrats you've a running container.
But how do we know that our application is running or not, for that reason we used
-p flag, this flag binds the port of nginx to your localhost port 8080 hence used -p 8080:80
Similarly you can stop the container using docker stop weather-app-on-docker or docker stop CONTAINER ID
It works
The last step is to check you application. Open your browser and in URL bar search for localhost:8080 the application will be there.
Now you can open your docker desktop to monitor container.

So here we are running our own Web App in Docker.
Thank you for reading, I hope you found it valuable.




