mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-01-15 18:51:56 +00:00
Code Issues Releases Wiki Activity
227 Commits 2 Branches 19 Tags 1.2 MiB
TypeScript 57.5%
CSS 31.3%
HTML 10.4%
Dockerfile 0.8%
33ebefd767
Go to file
Kristóf Tóth 33ebefd767 Start writing component documentation
2018-04-23 13:37:24 +02:00
e2e chore: initial commit from @angular/cli 2017-12-14 11:03:30 +01:00
src Rename IdeComponent.key_id 2018-04-20 17:32:41 +02:00
.angular-cli.json Using global CSS and shadow DOM CSSs as well 2018-03-07 17:22:28 +01:00
.editorconfig chore: initial commit from @angular/cli 2017-12-14 11:03:30 +01:00
.gitignore chore: initial commit from @angular/cli 2017-12-14 11:03:30 +01:00
karma.conf.js chore: initial commit from @angular/cli 2017-12-14 11:03:30 +01:00
package.json Add proxy config to yarn start 2018-03-02 13:33:03 +01:00
protractor.conf.js chore: initial commit from @angular/cli 2017-12-14 11:03:30 +01:00
proxy.conf.json Add proxy configuration to ease development 2018-02-01 16:35:00 +01:00
README.md Start writing component documentation 2018-04-23 13:37:24 +02:00
tsconfig.json chore: initial commit from @angular/cli 2017-12-14 11:03:30 +01:00
tslint.json chore: initial commit from @angular/cli 2017-12-14 11:03:30 +01:00
yarn.lock Upgrade xterm to 3.1 2018-02-15 14:07:11 +01:00

README.md

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