DEV Community

Cover image for Using GitHub Codespaces with VNC/flexbox to create Pokémon maps from a web browser
lowlighter 🦑
lowlighter 🦑

Posted on

Using GitHub Codespaces with VNC/flexbox to create Pokémon maps from a web browser

Hi there 👋 !

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

Gracidea preview

I use a combination of several technologies, like deno, pixi.js, 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 !😮)

Codespaces preview

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 💕 !

Discussion (1)

nkuwakwe profile image
Nelson Uwakwe