A React App For Developers To Visualize And Manage Their Docker Networks In Real-time

by React

DockerNet

An easy-to-use, locally-hosted web app for developers and engineers to visualize and manage their Docker Networks in real-time.

This tool is best used before and/or during the development of a Docker Compose YML file.

About

Description

DockerNet.io provides developers with the tools needed to visualize and manage a Docker Network. Developers will have the ability to view their networks in both a list view and graphical view. Developers are also able to create new networks, delete current networks, add containers to a network, and remove containers from a network.

DockerNet’s interface allows users to easily and seamlessly navigate between networks. This feature proves most useful during the early development of a Docker Network configuration.

DockerNet is designed to be used by developers who are new to the “Docker-verse” and appreciate having a visual aid. It also benefits seasoned developers who are designing a Docker Compose configuration as well as a means of verifying a Docker compose file is correctly configured and behaving as expected.

Features

  • Visualize Docker Networks
  • Add/Remove Containers to Docker Networks
  • Create/Delete Docker Networks

Tech Stack

  • ES Lint / Prettier – TypeScript Linting Library
  • SASS/CSS – Styling preprocessor
  • React (Router & Hooks) – Front-end Library
  • git/GitHub – Version control and Remote Repository Manager
  • Docker – Container manager
  • Bash – Command Line Interface
  • Node.JS – Package Manager
  • Jest – Testing Framework
  • TypeScript – Strongly typed Programming Language
  • Webpack – Static module bundler
  • Express – Server middleware
  • D3 – Data Visualization Library

Getting Started

Requirements

  1. Latest version of Docker

Installation

  1. Clone Repo to local device – git clone https://github.com/oslabs-beta/DockerNet.git
  2. Navigate to the DockerNet directory in terminal of chioce
  3. Install required packages on local device – npm install
  4. In the root directory rename .env.example file to .env

Note:

  • Frontend and Server Ports are defaulted to 8081 and 3031, respectively
  • These can be updated in the .env file found in the root directory

How to Use

  1. On your local device open Docker and ensure you have containers running
  2. Navigate to the DockerNet directory in terminal of chioce
  3. Start app using using the following command – npm start
  4. Wait for app to load in your default browser

Demo

Create Network

Delete Network

Navigate to Network

Add container to Network

Remove container from Network

List view and Graph view

Looking Ahead

Roadmap

Here’s a list of features currently being considered by the development team:

  1. Updating Data Visualization to include more robust container and network information
  2. Updating Data Visualization to provide the same functionality as List Display
  3. Updating Main Display to include all Network/Container information in a single view
  4. Incorporating Docker Desktop features such as starting and stopping containers
  5. Dark Mode

Authors

Creators

Contributors

  • Will you be the first? See below for instructions on how to contribute

How to Contribute

We love working with other developers in the open-source community! Here’s how to contribute:

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/NewFeature)
  3. Commit your Changes (git commit -m 'Add some NewFeature')
  4. Push to the Branch on your Fork (git push origin feature/NewFeature)
  5. Open a Pull Request from the Branch on your Fork to the master branch on the DockerNet.io Main Branch

Acknowledgements

  • Huge shoutout to OSLabs and CodeSmith for sponsoring the development of this product
  • Massive thank you to all the kind, considerate internet denizens who provided valuable feedback during the ideation period of this product
  • Gargantuan thank you to each and every individual who provided meaningful supp0rt (technical or non-technical) throughout the development of this product
  • Suporting Libraries:

License

Distributed under the MIT License. See LICENSE for more information.

GitHub

View Github