Visualizing Mastodon Internals
Tags: mastodon, rails, ruby, vscode
Published: 2022-11-22 16:15:05

[Mastodon](https://joinmastodon.org/) is free and open-source software for self-hosting social networking services.  It most closely resembles Twitter, but where Twitter is a centralized service for all its users, Mastodon consists of thousands of individual Mastodon hosts that are run by individuals and organizations.

Each of these instances are part of the greater [Fediverse](https://en.wikipedia.org/wiki/Fediverse), a decentralized group of systems that can all communicate with each other. There can be a lot to learn when getting started as a Mastodon user, but luckily there are some [fantastic blog posts](https://2ality.com/2022/10/mastodon-getting-started.html) and [sites with tips](https://fedi.tips/) out there to help you get started.

I’ve been checking out Mastodon as an end user ([follow me!](https://hachyderm.io/@petecheslock)) and I wanted to get to know the project better and see if there is an opportunity to contribute. Mastodon is written in Ruby on Rails, which is an easy to learn web application framework.

## Joining the Open Source Development Community
Whether you are running your own federated instance or not, you may decide to contribute back to the open source community. I don’t run my own instance (yet?) but Mastodon is an approachable project for me because of my experience with Ruby on Rails. There is definitely no shortage of help needed with any open source project and as its popularity grows so can [new requests and issues](https://github.com/mastodon/mastodon/issues).  

But Mastodon is a large Ruby on Rails application, and for even the most experienced Rails devs out there, onboarding to new codebases can be time consuming. As a former Ops person I find the best way to learn a project is to get it running and see how it works. 

Mastodon is a very well tested application with wide test case coverage, but it can be challenging to get up and running for folks with limited systems experience. Mastodon has a few system dependencies such as Redis, Elasticsearch and Postgresql and this can add to the complexity in operating it. 

Lucky for us, this project ships with a `devcontainer.json` [configuration file](https://code.visualstudio.com/docs/devcontainers/containers), which will dramatically reduce the time it takes to run Mastodon locally. 

## What are Dev Containers?
Dev Containers are a feature of VS Code (and also supported on [GitHub Codespaces](https://docs.github.com/en/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)). They enable a developer to use a Docker container as a fully featured development environment.  Why is this so amazingly helpful? One of the most difficult parts of running an application locally (or even running tests locally) is requiring very specific tools, runtimes, or libraries to successfully work with a codebase. There are _MANY_ tools out there that aim to solve this problem (tools like asdf or pyenv and others), but installing the entire code editor with all the necessary dependencies is close to a foolproof solution.

## Dev Containers and Mastodon
Mastodon already includes a devcontainer.json which points to the appropriate `docker-compose.yml` file, configures various VS Code extensions to be installed in the container, sets up port forwarding, and defines the command to run after the containers are created.  In this case, after the container starts, all the commands detailed in the [Developer Docs](https://docs.joinmastodon.org/dev/setup/) are executed so our container will be ready to run Mastodon. You’ll need [Docker Desktop](https://www.docker.com/products/docker-desktop/) setup and working before you get started. 

## Open Mastodon in a Dev Container
Launching Mastodon inside a Dev Container is simple with VS Code.  When you open a supported project, VS Code will notify you with a popup to relaunch inside a container. 

![DevContainer VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzujswj9gw04ysqws1xf.png)

Clicking “Reopen in Container” launches a new VS Code window and starts the deployment process.  When the postinstall command completes you’ll be prompted to `Press any key to close the terminal.`

![PostInstall Command Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jogbhgt5dy7k8plcsdwo.png)

Opening Docker Desktop, you’ll see all the containers involved in operating Mastodon. 

![Docker Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/441dg3lgf518k1tqz2b7.png)

We’ll now be dropped directly into the command line _inside_ our Docker container with the environment perfectly configured to support running this app.  

![CLI in container](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi9wcwwflmnbzzt2sw9m.png)

## Visualize How Mastodon Works
As an employee with [AppMap](https://appmap.io) I use AppMap every day to explore new and interesting code projects. AppMap is an open source runtime code analysis tool which helps developers visually understand how their code actually operates at runtime. 

AppMap records your applications interactions by watching your test cases running, or by seeing how your application runs locally, in Docker, or in development. The AppMaps will include data about your application like function calls, HTTP request attributes, authN/authZ, SQL queries and more. 

The result is a complete picture showing exactly the path the code takes as it executes. From API request to the database - you can see all the packages, classes, and functions involved in the request. 

![AppMap Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eefcrtvw2uwjjjaduicz.png)

### Install AppMap
You can skip the entire installation by cloning Mastodon from the [AppMap GitHub repository](https://github.com/land-of-apps/mastodon/) which is pre-configured and ready to run. But you can [check out our last post to learn how you can add AppMap to Mastodon](https://dev.to/appmap/installing-appmap-in-mastodon-with-vs-code-167d) or any other project.

## Record AppMaps of Mastodon
Now we can simply launch the rails application by running `bundle exec rails server`. Since the AppMap gem is installed at the top of our Gemfile, AppMap will enable request recording by default. This will generate a new AppMap for each request we make into Mastodon and help us better understand what is happening behind each of those API requests. 

![Starting Rails Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlbzhbagh4uq0fei1qv8.png)

Because Dev Containers are awesome, VS Code will automatically notice when one of our forwarded ports is available with a connection on the other side. When the application starts, simply click on “Open in Browser” and see your local Mastodon server running. 


![Port Forwarding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pg2l7251b3pa8rlhi8h9.png)

![It's Alive!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhrm96x5qftquupj9kkr.png)

## Generate AppMaps
With Mastodon running and AppMap recording enabled, we can start to interact with the app.  When running, the only seed data that gets created is the default admin account.  You can login with: 

Username: `admin@localhost:3000`
Password: `mastodonadmin`

After logging in you can interact with the application and AppMaps will appear instantly in VS Code.


![Mastodon Logged in Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5n42cfc96rgt8lb7643.png)

![AppMaps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/am9uh887slcl54zpoj8o.png)

Click on any of them to open them in VS Code to see the HTTP requests, function calls, SQL queries and more. 

![More AppoMaps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs8490i8xh5ixxhtskiy.png)

As more AppMaps are generated, you’ll start to see AppMap annotating the code functions. Clicking on any of these will show you a list of all the maps that code is used within. This can be incredibly helpful as you are onboarding with Mastodon to better understand where and how certain functions are used.  

![AppMap Pins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weh9huary8zz3w1w6771.png)

## Summary
At this point you should have been able to get Mastodon up and running locally with the power of VS Code and Dev Containers. Once the Dev Containers are deployed, adding AppMap is as easy as clicking a single box to install. After installation, you can generate maps and learn how the Mastodon internals work! 

In part 2 of this post, we’ll dive into how to run rspec tests locally on Mastodon using Dev Containers. With AppMap installed, we’ll automatically record those test cases running and generate maps. From there we’ll modify some code and show how AppMap can re-run only the specific tests required for the changes you made. This can save a lot of time when doing local development by only running a handful of tests vs the entire test suite. 

If you are interested in learning more, you can clone the Mastodon project in the [AppMap repository](https://github.com/land-of-apps/mastodon/). You can add AppMap to your [VS Code or JetBrains](https://appmap.io/download) code editor. And finally, you can join the conversation and chat with other AppMap engineers and users by joining the [AppMap community Slack](https://appmap.io/slack)