Creating the KubeCon Flappy Dock Extension

During KubeCon EU 2022, our Docker team was able to show off many of our latest releases, including

During KubeCon EU 2022, our Docker team was able to show off many of our latest releases, including and . Community feedback on these has been overwhelmingly positive! To help demonstrate the types of extensions available, we demoed the Disk Usage extension and built our own extension just for the conference: Flappy Dock! Let’s dive into the extension and how we built it.     In case you haven’t built your own extension, extensions are simply specially formatted Docker images that contain a frontend and optional backend services. The frontend is simply a web app that’s extracted from the image and rendered within Docker Desktop. Therefore, anything that can run in a web browser can run as an extension! The extension’s (more on that later) configuration file tells Docker Desktop how to install and use it. As we looked around for fun ideas for KubeCon, we decided to run a simple game. Fortunately, we found a web adaptation of Flappy Bird on GitHub — thanks ! This would be a perfect starting point. While Flappy Bird is fun, why don’t we make it match our nautical theme while using Moby and Molly? Luckily, that’s a pretty easy change to make with the following steps. After cloning the repo locally, we can launch the app using an container. Using the new Featured Images page, I can start my container with a few clicks. If I start an container, select the directory I cloned the repo into, and open the site, I get Flappy Bird! Feel free to play a game or two (use either the mouse or spacebar to play the game)!     To customize the game, we need to swap out some images with some Docker-themed images! Each of the following images go into the folder.   We’ll modify the and replace the original sky, ceiling, and land assets with our new images. If we refresh our browser, we should have the following now!     Our images are now in place, but we’ll need to tweak the colors where the images aren’t being used. We’ll do that next! In the file, make the following changes:   You can see our game coming together!     With both CSS classes in place, let’s update the game code to randomly choose a character. We also must clear out the previous character choice, since you can play the game multiple times without refreshing the page. In the file, locate the function. At the top of that function, add the following:   Finally, check out your game. You should now successfully have either Moby or Molly as your main character while playing Flappy Dock!       Now that we have our web-based game ready to go, it’s time to turn it into an extension! As we mentioned earlier, an extension is simply a specialized image that contains a metadata.json with configurations. To use the docker extension commands, first install the Docker Extension SDK plugin (instructions can be found ). This is currently the only method to install an extension not listed in the Extensions Marketplace. In the root of our project, we’re then going to create a file with the following contents:   Now, all that’s left is to create a container image. We can use the following to do so!   The here simply puts the at the root and copies other key files in the locations we specified in our config. You can also use various labels to describe the image (which is helpful for images in the Marketplace). At this point, we can build our image and install it with the following commands:

  Within Docker Desktop, we should now see Flappy Dock in the sidebar! If you click on it, you can play the game!       For KubeCon, we added a few additional changes to the app — including a running total score, run count, and an available “easy mode” with extra space between the pipes. Want to learn more? Check out our version of the code in . While a fairly basic example — by building Flappy Dock into an extension — we demonstrated how to turn any web-based interface into an extension. If you have ideas for your own tools, documentation, or even games, we hope this blog post helped out! If you want to dive deeper into Docker Extensions and explore the additional capabilities provided through the SDK (including running Docker commands, listing containers and images, and more), visit the resources below. We’d love to hear your feedback and about what you want to build with Docker Extensions!