Using GitHub Codespaces with VNC/flexbox to create Pokmon maps from a web browser

Hi there !

I'm currently working on a cool project, Gracidea, which is an animated Pokmon live web map aiming to recreate the whole Pokmon world while being accessible directly from your browser:

I use a combination of several technologies, like deno, pixi.js, vercel.com and Tiled map editor along additional other tools. Some of these, like Tiled, are graphical desktop apps so they need to be installed first.

Which made wonder, what if it was possible to provide a graphic environment to access desktop apps and edit maps directly from a web browser... ?

And it is !

If you don't know, GitHub offers codespaces which lets you spawn a web-accessible docker instance from a repository with VS Code pre-installed. However, not many people know that it is actually possible to configure the dockerfile through the .devcontainer folder of said repository.

Note: Seems that this feature is in closed beta for users accounts

After playing a bit with Microsoft's vscode-dev-containers' lightweight desktop I achieved to configure vnc and flexbox (the provided desktop env) to spawn a full-screen instance of Tiled!

Below's a preview of the whole thing, in Firefox (yes, everything is happening in the browser !)

So yeah, basically all you need to setup this project now is just a web browser, no headaches caused by "but it works on my machine !"

If you're interested in the required code to make this works, it is available here!

Thanks for reading !