From 33ebefd767443445d095928d70d5cdea47d9d55e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Mon, 23 Apr 2018 13:37:24 +0200 Subject: [PATCH] Start writing component documentation --- README.md | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f728207..1f465f9 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,35 @@ This is the Angular frontend of TFW. -The main component it exposes is the `src/app/services/websocket.service.ts` service – providing an RxJS based communication API with the framework backend – and several pre-implemented components for you to used based on it. +The main feature it exposes is the `src/app/services/websocket.service.ts` service – providing an RxJS based communication API with the framework backend – and several pre-implemented components for you to use based on it. -To learn more about the framework see the `baseimage-tutorial-framework` repo. For more on building and running TFW (not just the frontend) consult `test-tutorial-framework`. +To learn more about the framework see the `baseimage-tutorial-framework` repo. For more on creating and running TFW-based tutorials (not just the frontend) consult `test-tutorial-framework`. + +## Components + +In this section we are going to explore the various pre-made components this project offers. + +Generally these components connect to a TFW event handler running on the backend. +Communication is handled via simpe APIs exposed by these event handlers – over TFW messages. + +### Terminal (webshell) + +A full-fledged xterm terminal emulator based on xterm.js running right in your browser. +The emulator is connected to a `TerminalEventHandler` instance running on the backend over websockets. + +This event handler spawns a `bash` session and a `pty` (pseudoterminal). It connects the master end of the `pty` to the emulator running in the browser and the slave end to `bash`. + +This essentially provides a shell running in the browser. +You can write to it and read what commands were executed in `bash` using the API exposed by the `TerminalEventHandler` instance. + +### IDE (webIde) + +This component is a simple text editor based on ACE. +It always shows all files in a given folder and allows you to switch between those files using the tabs on top. + +It connects to an `IdeEventHandler` instance on the backend. ## Running standalone with yarn Simply execute `yarn start` in the project root. +This will automatically set up proxying of the port `4200` to `8888` (the port this webapp is served on to the port TFW listens on).