Skip to content

A Phoenix LiveView component offering an interactive IEx shell

License

Notifications You must be signed in to change notification settings

kevinschweikert/underthehood

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 "../../deps/underthehood/lib/hook"

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

About

A Phoenix LiveView component offering an interactive IEx shell

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Elixir 96.4%
  • JavaScript 3.6%