mrtoth
/
frontend-tutorial-framework
mirror of https://github.com/avatao-content/frontend-tutorial-framework
1
0
Fork 0
Code Issues Releases Wiki Activity

Start writing component documentation

This commit is contained in:
Kristóf Tóth 2018-04-23 13:37:24 +02:00
parent 321aaab526
commit 33ebefd767
1 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
README.md
View File

@ -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).