# frontend-tutorial-framework

This is the Angular frontend of TFW.

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