View Source Underthehood
introduction
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:
https://user-images.githubusercontent.com/533425/165928339-b2591adc-da34-47e6-ae82-166e5d464060.mov
installation
Installation
Add
underthehood
to your project dependencies.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})
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
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