A few weeks ago I made a post here about a tool I built that lets users visually compose their containerized application stack and export docker-compose.yml code. ([https://nuxx.io](https://nuxx.io/))
That initial post received a lot of positive feedback, many feature suggestions, and bug reports. After developing for a few weeks, I released many of the requested features, fixed a ton of bugs, and improved the UI. Sorry, mobile still needs work.
Major features are, importing existing docker-compose.yml files is now possible. Users can login, save and load their existing projects. Next set of major features will be embed codes, so users can embed their project graphs in html pages or project management apps. And deployments. I want to see here first if you guys would find it useful to deploy the application stack directly from the tool. You would need to give the tool access to your EC2 or DO instance, and click “Deploy”.
Sample imported docker-compose.yml I got off of GiHub: [https://app.nuxx.io/?import\_url=https:%2F%2Fraw.githubusercontent.com%2Fnezhar%2Fwordpress-docker-compose%2Fmaster%2Fdocker-compose.yml](https://app.nuxx.io/?import_url=https:%2F%2Fraw.githubusercontent.com%2Fnezhar%2Fwordpress-docker-compose%2Fmaster%2Fdocker-compose.yml)
Looking forward to improvement/features suggestion, bug reports.
Thank you all.
I would like to also mention that I am working on open sourcing the core code base. This would have everything you see now (Dockerized ;)). For anyone interested in this, please star the repo [https://github.com/nuxxapp/nuxx](https://github.com/nuxxapp/nuxx), and if you can, give me a follow on Twitter [https://twitter.com/nuxxapp](https://twitter.com/nuxxapp). Twitter seems to be the best way to directly communicate to the users, I dont have any email newsletters.
8 thoughts on “Visual app composer to generate docker-compose.yml quickly, round 2”
Sound cool. Will test it soon!
I think this is quite a neat app, very interesting and possibly very usefull for a lot of people (including myself).
Some general UI/UX observations:
* I think you followed the Atlassian way of adding a +-button in the blue left panel for adding stuff. It took me quite a while to find it. I think adding a big ‘Add container’ button in the top left corner of the canvas would be more appropriate, as that’s the thing the app is all about.
* The sidebar that opens after pressing the + button is very bland when you haven’t searched yet for anything. It might be an idea to show the most popular images by default? Popular images can be found on the homepage [https://hub.docker.com/](https://hub.docker.com/).
* The squares in the canvas itself have a green and yellow dot to connect them. This usually means green can only be connected to green, and yellow only to yellow. In this UI, it seems to be the opposite? Why?
* The canvas is very far zoomed out after importing a docker-compose file, so buttons/text/yellow-green circles are very small. Is it possible to zoom? When I open the app in a different browser it seems to be more zoomed in.
* Clicking the ‘account’ button in the lower left deletes my work in progress on the canvas, possibly losing valuable progress. Maybe it can be automatically saved or give me a warning ‘if you continue your progress will be lost’. Just noticed it also happend when pressing the logo in the top left corner.
* There are a couple of modals without cancel/close buttons, which caught me off guard. You can press the faded background, but that’s not always obvious (for example import modal, add custom container)
* After copy/pasting my own docker-compose file in the editor, it takes a while for the canvas to update and show rectangle per service. You might want to add a loading indicator, as in the beginning I thought it did not work.
I think making everyone’s work public would be better. It goes into the public searchable repository and people can vote which one is best just like how recipe sites do. So you have angular/.net core 1,2 etc. Not sure how you can guarantee they work without upping them in some offline process and updating a check mark on the file or something like that.
This is the tool that I have searched a few months ago! I’m going to use it next week on my next project.
May I ask you one question if you don’t mind. What solution did you use for that drag-n-drop diagram builder?
Thank you for taking the time to make this.
this project deserves more attraction. I am following this project for a few weeks. whiffersnout is awesome. I am witnessing how a baby becoming a monster. keep up the good work @whiffersnout
Looks really cool but doesn’t work very well on my phone so I’ll have to check it out at a workstation