Building an In-Browser IDE the Hard Way

Summary

This tutorial builds a personal remote development environment: an in-browser IDE for Elixir/Phoenix work, deployed as a Fly Machine from a Dockerfile and managed with command-line tools. The image uses an official Elixir base, adds code-server, flyctl, build dependencies, and the Elixir Language Server extension, while a multi-stage build copies in Tired Proxy. A persistent volume holds working files, and the startup configuration can clone a repository, launch code-server behind HTTPS, and arrange for the machine to sleep after an hour without HTTP requests. From the IDE terminal, the walkthrough then creates and deploys a separate Phoenix hello-world application backed by SQLite, setting its secret and provisioning storage. The resulting setup can wake on browser access, but random HTTP traffic or an active code-server terminal may keep it running, and stopping or destroying the apps limits costs.

Takeaways

1. 1

   The development image combines an official Elixir base with code-server, flyctl, and the Elixir Language Server extension, using a multi-stage build to copy in Tired Proxy.

2. 2

   Tired Proxy can shut down the machine after an hour without HTTP requests, while Fly’s proxy can wake it for browser traffic; random bots and an active terminal may prevent it from sleeping.

3. 3

   The walkthrough deploys a separate Phoenix hello-world app from the remote IDE, generating SECRET_KEY_BASE, creating an encrypted 1GB volume, and using SQLite for storage.