Docker Desktop’s new feature, Container File Explorer, takes file management to a whole new level. No more struggling with long CLI commands or path parameters. With a simple UI, you can now view, edit, copy, and delete files within containers of any state or type. Check it out on the Containers tab of the Docker Desktop dashboard.

Here’s what this powerful tool offers:

• Crystal-clear file visibility: Get a comprehensive view of your container’s file structure, making it easy to locate specific files or directories.
• In-container editing: No need to leave the Docker Desktop interface! Edit files directly within your container, streamlining your development process.
• Streamlined file management: Effortlessly copy and delete files within your containers, simplifying your workflow and keeping your container environment organized.

Who benefits?

Container File Explorer is for anyone who interacts with containers:

• Developers: Say goodbye to the days of memorizing complex commands. This intuitive interface allows you to focus on your code, not the intricacies of container file management.
• Docker Desktop users: Take full advantage of the features you already love. Container File Explorer seamlessly integrates into your existing Docker Desktop workflow.pen_spark

Demo

To demonstrate Container File Explorer, we will be using a simple Event posting application. This app follows a typical client-server architecture, where the client (browser and AngularJS) sends requests to the server (Express.js, Node.js, and MongoDB) to retrieve or store data, and the server responds with the necessary data. This app uses AngularJS as the frontend framework, Express.js as the backend web framework, and MongoDB as the database management system. 

Prerequisite:

• Docker Desktop 4.18.0 and above

Step 1. Clone the repository

https://github.com/dockersamples/events

Step 2. Examining the Compose file

services:
  frontend:
    build:
      context: "./frontend/events"
      dockerfile: "./Dockerfile"
    networks:
      - events_net
  backend:
    build:
      context: "./backend"
      dockerfile: "./Dockerfile"
    networks:
      - events_net
  db:
    image: mongo:latest
    ports:
      - 27017:27017
    networks:
      - events_net
  proxy:
    image: nginx:stable-alpine
    environment:
      - NGINX_ENVSUBST_TEMPLATE_SUFFIX=.conf
      - NGINX_ENVSUBST_OUTPUT_DIR=/etc/nginx
    volumes:
      - ${PWD}/nginx.conf:/etc/nginx/templates/nginx.conf.conf
    ports:
      - 80:80
    networks:
      - events_net

networks:
  events_net:

Step 2. Bringing up the application

docker compose up -d

Open Docker Dashboard and click on “Containers” on the left sidebar. Next, click on any of the container services as shown:

Click on “Files” to view the list of files and directories.

Step 3. Editing the File

Let’s try to make some changes in the frontend files. Choose the specific files where you want to make changes. 

Let’s pick up docker-entrypoint.sh and add a comment as shown below:

Save the file changes by hitting the “Save” button as shown above. Once it is saved, the system will label the file as “Modified”.

Container File Explorer makes managing files within containers more accessible, efficient, and user-friendly. It’s a valuable addition to Docker Desktop, empowering you to work smarter and faster with your containers.