{“payload”:{“allShortcutsEnabled”:false,”path”:”demo/terminal”,”repo”:{“id”:637646872,”defaultBranch”:”main”,”name”:”van”,”ownerLogin”:”vanjs-org”,”currentUserCanPush”:false,”isFork”:false,”isEmpty”:false,”createdAt”:”2023-05-08T05:45:31.000Z”,”ownerAvatar”:”https://avatars.githubusercontent.com/u/132869025?v=4″,”public”:true,”private”:false,”isOrgOwned”:true},”currentUser”:null,”refInfo”:{“name”:”main”,”listCacheKey”:”v0:1692402062.0″,”canEdit”:false,”refType”:”branch”,”currentOid”:”2042f5e23a8cf62b48b29bc15c4b7d8ba0fbc8f7″},”tree”:{“items”:[{“name”:”README.md”,”path”:”demo/terminal/README.md”,”contentType”:”file”},{“name”:”client.html”,”path”:”demo/terminal/client.html”,”contentType”:”file”},{“name”:”codesandbox.png”,”path”:”demo/terminal/codesandbox.png”,”contentType”:”file”},{“name”:”package-lock.json”,”path”:”demo/terminal/package-lock.json”,”contentType”:”file”},{“name”:”package.json”,”path”:”demo/terminal/package.json”,”contentType”:”file”},{“name”:”server.ts”,”path”:”demo/terminal/server.ts”,”contentType”:”file”},{“name”:”tree_screenshot.png”,”path”:”demo/terminal/tree_screenshot.png”,”contentType”:”file”},{“name”:”van-1.1.0.min.js”,”path”:”demo/terminal/van-1.1.0.min.js”,”contentType”:”file”}],”templateDirectorySuggestionUrl”:null,”readme”:{“displayName”:”README.md”,”richText”:”
In this demo, we’re going to show how to use VanJS to develop a web-based Unix terminal that connects to your local computer, with some notable improvements, all under 300 lines of code. While there are numerous open source projects aiming for a better terminal or shell, this example demonstrates that, with VanJS, we can easily provide great extension to commandline utilities with fancy GUI by leveraging all available HTML elements.
n
The program is heavily tested in macOS, and should in theory works in Linux, or in any environment that has /bin/sh.
n
You can preview the terminal app via CodeSandbox.
n
Features
n
Compare to the ordinary Unix terminal that you’re familar with, this web-based terminal has 2 notable improvements:
n
- n
- Command
ps ...will render an HTML table instead of text output. - Command
tree(need the exact text match) will render an interactive tree-view of your current directory, like the one in the screenshot below:
n
n
n
n
Source Files
n
- n
server.ts: A Deno-based server-side script which connects to the shell of your local computer.client.html: An HTML file served byserver.tswith client-side implementation for the GUI of the terminal.van-1.1.0.min.js: Minified VanJS code, used byclient.html.
n
n
n
n
Run the Terminal App in Your Local Computer
n
Follow the steps below to run the terminal app in your local computer:
n
- n
- For the terminal to work, you need Deno runtime to run the server-side script. If you don’t have Deno in your environment, you can get it installed from https://deno.land/.
- Clone the
vanrepo, if you haven’t done already:
n
n
n
git clone https://github.com/vanjs-org/van.git
n
- n
- Go to the root directory of the
vanrepo:
n
nn
- n
- Run the command below under your wor
