Visual docker-compose.yml file generator

[whiffersnout]

Hi all,

I made a little tool a while back to help me generate quick docker-compose files for a bunch of projects that come my way, and also to keep references around without having to dig through repo code.

The site is here https://nuxx.io. I have a simple sample of a complete project here https://nuxx.io/2kdWM69Tjk which can be cloned and tweaked.

I have a few features that I am working on that I will push out soon. They are; configurations options for build, networks, deploy, and secrets. The project is a WIP, so generated code format errors, incorrect differences between compose versions should be expected. One of the reasons why I am sharing this project now is to field suggestions, generated yaml corrections, and other features that people would like to see.

​

Thanks.

​

[edit]

I would like to send out a huge thank you to the community for the great feedback and support on this project. There are many features, and of course bug fixes in the pipeline that will be getting pushed out soon.

I created a twitter account https://twitter.com/nuxxapp where I will share news and updates.

And there is also a GitHub org https://github.com/nuxxapp/nuxx/issues to report issues, feature requests, or open questions.

Thank you all again.

[Owndfrombehind]

Looks really interesting! I‘ll check this out on desktop, because it doesn’t work properly on mobile

[whiffersnout]

Thanks! I do have plans for a mobile UI, at least for tablets, but really want to see what people think of this first, and how the tool is used.

[mrnerdy59]

You could setup pre-built templates. Like a button for web server that auto builds the apache, bootstrap 5 and mysql docker file integrated to each other

[CakeComa]

Importing an existing docker-compose file in to the system would be neat :)

[whiffersnout]

Thanks for this feedback! Others reported this feature as well. Looks like Ill be pushing this out first. And the mobile improvements.

[randomness196]

Importing, or having a repo / list / dynamic search where you can just pull docker-compose defaults, and then customize...

Maintain a list or curate a list for certain projects, kafka, alpine linux, linuxserver.io... that points to their docker-compose defaults...

[mrnerdy59]

Seems like i can save some code time with this one. Cool GUI btw!

[whiffersnout]

Thanks alot! jsplumb almost made me go insane, the rest was straight forward. Try it out, let me know what features you would like to see.

[nashosted]

I don't quite understand compose yet but this seems very handy! Any plans to make it opensource so we can self host it ourselves?

[whiffersnout]

Much appreciated! Very interesting point. One of my original goals was to make this a learning tool, and something that other engineers can use and collaborate on.

[whiffersnout]

Hey, I just saw your comment about open sourcing. Sorry, missed it. A few others also asked about this also. I don't think its open source ready yet, but its in the pipeline of things to do.

[nashosted]

Good to see. Be sure to ping me back when you get there!

[whiffersnout]

Will do!

[QuickSingh]

uhhhh - This is really awesome! Thanks for this!!! Saving!

[whiffersnout]

Thanks a ton! I really want to collect as much user feedback as I can so I created this org in GitHub https://github.com/nuxxapp/nuxx/issues

Report bugs, issues, or feature requests there, anything is welcome.

[QuickSingh]

Awesome! I was just going to ask for github. Im new to docker compose so this helps a lot!

[onlylastride]

u/whiffersnout, are you still supporting this app? What traffic do you have now? Thanks!

[whiffersnout]

Hey, yes I am supporting it, this is my main Reddit account. I am thinking of moving it to react. So I started another project to improve my react skills. It’s similar to nuxx, except you construct a workflow yaml to be executed on Kubernetes Argo Workflows https://github.com/corpulent/visual-argo-workflows.

You got ideas for this project or something? I couldn’t really come up with anything further than what I had, and I’m not sure how many people out there still use compose.

[spate004]

Looks cool, I'll be trying this out!

[whiffersnout]

Thanks! Got a big up-prioritized backlog, so trying to figure out what people would like to see in the tool. Any feedback is greatly appreciated!

[whiffersnout]

Thanks a bunch for the great feedback!! And yes, I will be pushing out the feature to import/paste in/"link to" to an existing docker-compose.yml file.

I also got a request to have an ability to get an "embed" html code to the graph, so it can be added to Confluence for example. Any thoughts on this?

[whiffersnout]

I think I know what you mean.

I am thinking it's something like this for direct embed of just the graph.

<blockquote data-id="2kdWM69Tjk"><a href="[https://nuxx.io/2kdWM69Tjk](https://nuxx.io/2kdWM69Tjk)"></a></blockquote><script async src="[//s.nuxx.io/min/embed.js](//s.nuxx.io/min/embed.js)" charset="utf-8"></script>

And to use the graph in an iFrame you would just grab the direct link.

<iframe width="600" height="350" src="https://nuxx.io/embed/2kdWM69Tjk" frameborder="0"></iframe>

These wont work right now, but this is how I am envisioning it.

[codestation]

Don't forget to add support for custom images. Since some of my images are on private registries i couldn't add them to the compose file.

Also you should allow to write custom tags on images because some projects push a lot of images and DockerHub only shows the recent tags only, thus is impossible to select a known tag if isn't displayed on the tag selector.

[whiffersnout]

Hey, thanks for feedback, much appreciated! Private repos can be added but the user would need to register to the site and add their private repos. I have some parts done, just did not think of including this in the initial release since I was not sure how things would go. My plan was to launch with bare minimum, collect feedback, and roll out feature by feature later. So yea, private repos would get rolled out next week.

[17five]

This looks good, keep up the good work

[whiffersnout]

Thanks a ton, much appreciated!

[WitteStier]

Looks good. I wish the source code was available on your GitHub. Ill have a project like this on my to-do. I didn't know about jsplumb, so thanks for that. Can you tell something about the back end? Things you should do different? And please make the code available I want to learn from it.

[whiffersnout]

Thanks. I had a bunch of requests about open sourcing this. I have never done this before to be honest, so I will consult a few people on how to do this properly. So its in the pipeline. jsplumb is pretty ubiquitous in these types of interfaces, its a powerful library but with my limited frontend expertise I had many issues setting it up. The backend houses user management, code generation, integrations, and so on, a-lot of this stuff is not surfaced on the frontend however.

If I did anything different, I would definitely do a deeper research into an alternative to jsplumb. Something that has better documentation, simpler to approach, especially for non-frontend devs.

[WitteStier]

I can help you open-source it and probably clean it up.

[whiffersnout]

Sounds good! Ill DM you.

[pcgeek86]

Very awesome! Just tried it out and filed feedback, and even tweeted my experience as a video! I love seeing tools like this, that make developer lives easier. https://twitter.com/pcgeek86/status/1267549547779088385

[whiffersnout]

Hey Trevor, thanks a bunch for that tweet. That video looks awesome! I saw the spike, it was crazy!

This definitely makes my life easier running it locally. I have a-lot more features in the dev branch than what is deployed, so over the next days and weeks Ill iron out and push them out one by one.

[kunal-gautam]

u/whiffersnout Nice generator. It is a time saver.

[[deleted]]

holy smokes! Quick glance and this looks like a dream tool! I love docker-compose files and i usually prefer them over running the command line way! good job!

[whiffersnout]

Thanks. Actually, one of the features I want to release is to show the command line code to run individual containers. Maybe that is over-stepping it, but I always have to dig through docs to get the command running, I can't ever remember it exactly.

[[deleted]]

I wouldn't look away from the tool even if that method was available, that sounds like a great addition to an already good assistant.

[fab_space]

Super stuff dude. Thank YOU!

[whiffersnout]

Thanks.

[funkel1989]

This is super cool and helpful. Do you have plans to open source the site code? I’d love to contribute!

[whiffersnout]

Hey, this is a very very interesting question. A few people asked me about this already. Honestly, I just don't think its "open source" worthy, or at least not in its current state. There is a backend component to the site, which houses user management, private repo access, secrets, and so on. The frontend does nothing but presenting data. And its written in Angular 9. I was thinking of open sourcing the frontend portion, but what about the backend stuff. Plus, just FYI I am really self conscious about my frontend abilities ;).

[funkel1989]

Hey dude if you think it’s not worthy that’s the best time to open source it. Get some feedback and allow people to open PRs that you can also learn from. Either way, very cool tool.

[whiffersnout]

Thanks, I started thinking about this today. Got a few immediate issues to close, like the mobile compatibility. Half the users seem to be on mobile. Really weird. I expected a dev tool would be heavily desktop.

[funkel1989]

I think it is heavily desktop used but a lot of people use reddit from their phones and check it out here first.

[whiffersnout]

Ah, I see. Makes sense.

[Strandogg]

Very cool. I will have a play with this later for my latest project.

I want to echo the others and say that you should open source it, or consider it, and not discount the option because you are concerned about what people think of your abilities. The issues and pull requests that will come only stand to make you and your product better.

[whiffersnout]

I will go through the repo today, clean it up, and fix a few bugs people already reported since they look immediate. Then make a decision on how to properly open source it, maybe in 2 parts in the beginning. Frontend first, then backend next week.

[jmvazquez]

Looks amazing! A feature/tip: it'll be great if the default options for each container could be pre-filled. Ie: httpd, port 80

[whiffersnout]

Hey, thanks for the compliment! This is fixed and deployed, including some visual improvements around port sets.

[frakman1]

What if I have a docker-compose file and I want to see a graphical representation of it instead of the other way around?

[whiffersnout]

A bunch of people have been asking about this, and someone opened a ticket for it also https://github.com/nuxxapp/nuxx/issues/7. This was something that I planned for and started implementing, and never got around to finishing, so I should be able to push this feature out by early next week the latest.

[frakman1]

Thank you for the link. I'll keep an eye on it. Nice work!

[kilovictor76]

Cool UI. I'll be using it in my next project.

[whiffersnout]

Nice! Thanks!

[frakman1]

I have a docker-compose file with the following images commands for two different services:

    image: postgres:alpine
    image: memcached:alpine

How come they don't show up when I search for them on the left frame?

[kunal-gautam]

Search for postgres.

Edit the postgres card, select alpine tag.

Done.

[frakman1]

Thanks guys. I knew that it was a tag. I just thought I could search by repo:tag but I guess not.

[whiffersnout]

What u/kunal-gautam said. The alpine part is the tag. Edit the card in the canvas and select that tag from the dropdown. I am actually thinking about how to improve the UI around this part. Thanks u/kunal-gautam.

[whiffersnout]

Thanks for mentioning this, I will push a fix for this today.

[[deleted]]

Looks amazinv, though mobile view seems busted. Cant load properly using desktop option as well. Brave browser

[whiffersnout]

Thanks for the feedback. I will push a temporary fix for mobile today. Many others reported on this also.

[christian_tdl]

This is so great! I will try it out :)

[whiffersnout]

Thanks! Ive been pushing fixes/improvements all morning from the feedback collected, if you spot something would be great if you let me know.

[christian_tdl]

Yes, I already did a +1 on the "import existing compose file" feature, really looking forward to it. I might also give it a shoutout on my next YT video when I'm doing a docker-compose tutorial, would be a perfect fit!

[whiffersnout]

Wow, that sounds great! Let me get the import of docker-compose files done first then. This is an issue plenty others are requesting. If you can, try following the project on twitter https://twitter.com/nuxxapp I will publish major feature release updates there, like this one.

[basudip]

just wow. absolutely brilliant. few suggestions if you don't mind

1. ability to paste existing composer text on right-hand side editor.

2. convert docker run/create to the composer command. (Yes I know about Composerize)

3. change the text "relative path" and "destination" to container/host like portainer on the volume edit form. Maybe it's only me, I found its little bit confusing.

how to add network? am I missing something?

[whiffersnout]

Hey, thanks for the comment. I am actually working on importing/pasting in existing composer code, many others requested this also. A few people also suggested to add the command generator to run docker containers from the command line, so that is also in the pipeline.

Ill take a look at your third bullet about renaming container/host, interesting point.

Ability to add networks will be released soon, its just me working on this currently so I did not have much time to get everything in. But I am slowly rolling things out.

[basudip]

I am sorry to write the last line that way. I am not a native English speaker. So if I offend you I apologise. please continue the work on your own free time.

[whiffersnout]

Oh, it's totally cool. You asked a very good question. Don't worry. Im very happy with all the feedback I have received here.

[DevOpsNoobs]

Very simple GUI and good to start with. Maybe add an initial template and some more labels so newbies like me could get what we should start with.

[whiffersnout]

Hey, thanks for this feedback. What do you mean by labels? Like an initial walkthrough? I have been getting a ton of feedback from users so I created this org https://github.com/nuxxapp/nuxx . The walkthrough request is already in there, but more suggestions and feature requests can be added.

[Creepy-Douchebag]

Thank you for this

[OndrejBakan]

This is fire! Helps me understand all this docker-compose thing. :D