frontend-tutorial-framework/README.md

37 lines
1.8 KiB
Markdown
Raw Normal View History

2018-03-30 21:42:56 +00:00
# frontend-tutorial-framework
2018-03-30 21:42:56 +00:00
This is the Angular frontend of TFW.
2018-04-23 11:37:24 +00:00
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.
2018-04-23 11:37:24 +00:00
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.
2018-03-30 21:42:56 +00:00
## Running standalone with yarn
Simply execute `yarn start` in the project root.
2018-04-23 11:37:24 +00:00
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).