/underthehood

A Phoenix LiveView component offering an interactive IEx shell

Primary LanguageElixirMIT LicenseMIT

Underthehood

Introduction

This library provides LiveView components offering interactive IEx terminals. This allows peeking 'under the hood' of your application - right in your web browser.

Here's an example of what the Underthehood.terminal_button/1 component looks like in practice:

underthehood-demo.mov

Installation

  1. Add underthehood to your list of dependencies in mix.exs:
def deps do
  [
    {:underthehood, "~> 0.1"}
  ]
end
  1. Register a Phoenix hook by editing the app.js script of your Phoenix project. This typically amounts to registering a hook along these lines:
import TerminalHook from "underthehook"

let Hooks = {}
Hooks.Terminal = TerminalHook

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: Hooks})
  1. In your templates, start using any of the offered LiveView components, e.g.
[..]
  def render(assigns) do
     ~H"""
     <div>
       Hello World!
       This is a LiveView!
       <.terminal_button/>
     </div>
     """
   end
[..]

Credits

This library was written by Frerich Raabe, however it is really just standing on the shoulders of giants:

  • Phoenix LiveView is what enables the interactivity
  • Xterm.js provides the frontend terminal component
  • extty is the Elixir package used for running the Elixir shell