New `@theia/example-hybrid` application #2340

paul-marechal · 2018-07-11T13:45:37Z

This PR adds support for an electron client to connect to an hybrid backend.

Currently done:

New @theia/example-hybrid package that can serve both web browsers and electron apps.
Modified the generators to autogen @theia/example-hybrid.
New Electron-specific commands to choose a remote host to connect to.
- Basic host connection history.
- Host polling to see status (online/offline).
Some issues when actually loading remote content in Electron.
- It seems to come from the AMD loader importing the monaco editor.
Security options are not yet set to accommodate for remote content loading
- Such as disabling node integration and such...

How to test this PR:

Use node v8.2.1, it should be the same as the one used by Electron, so that you don't have to rebuild native modules when starting @theia/example-electron and @theia/example-hybrid

nvm install 8.2.1
nvm alias electron 8.2.1
nvm alias default electron
nvm use electron

Start both @theia/example-electron and @theia/example-hybrid so that you have a server to connect to.
Open the command palette (F1) and use Remote: Connect to a server.

paul-marechal · 2018-07-11T13:49:09Z

Currently having an issue when the electron client connects to the hybrid backend:

The correct bundle.js seems to be sent/received, but the AMD loader seems to having troubles loading the monaco editor. I might need some help here @akosyakov if you don't mind...

It looks like the AMD loader is assuming a node environment, but cannot find some resource, I am a bit confused.

akosyakov

The generator part looks good already :)

examples/hybrid/package.json

dev-packages/application-manager/src/generator/backend-generator.ts

packages/core/package.json

packages/core/src/common/promise-util.ts

.gitignore

akosyakov · 2018-07-12T08:05:19Z

Could you elaborate on:

Host polling to see status (online/offline).

paul-marechal · 2018-07-12T13:27:00Z

Host polling to see status

When typing a URL to connect to, the QuickOpenItems will show the state of the server at the targeted address, so that you can know which server is worth connecting to. It will display the state of the request as a description for the URL. The message can be improved later, for now it does what it is meant for: knowing the state of an endpoint (online/offline).

paul-marechal · 2018-07-12T15:49:31Z

I just realized that the issue I am having when trying to run the Electron Frontend from http seems to be unrelated to my changes.

If you start an electron application, and then try to open index.html over http instead of reading it directly from disk, it will throw the exact same error. The server will answer you, it will send you the page and the bundle.js, but you will have this error:

loader.js:256 Error: ENOENT, renderer/vs/editor/editor.main.js not found in /home/emaapur/projects/theia/node_modules/electron/dist/resources/electron.asar
    at notFoundError (ELECTRON_ASAR.js:114:19)
    at Object.fs.readFile (ELECTRON_ASAR.js:481:16)
    at NodeScriptLoader.load (http://localhost:3000/vs/loader.js:750:26)
    at OnlyOnceScriptLoader.load (http://localhost:3000/vs/loader.js:585:32)
    at loadNextPath (http://localhost:3000/vs/loader.js:1433:41)
    at ModuleManager._loadModule (http://localhost:3000/vs/loader.js:1445:13)
    at ModuleManager._resolve (http://localhost:3000/vs/loader.js:1524:22)
    at ModuleManager.defineModule (http://localhost:3000/vs/loader.js:1192:18)
    at RequireFunc (http://localhost:3000/vs/loader.js:1640:31)
    at http://localhost:3000/12.bundle.js:2053:9
defaultOnError @ loader.js:256

I currently don't really understand how to fix this.

paul-marechal · 2018-07-16T14:20:20Z

microsoft/vscode-loader#12

paul-marechal · 2018-07-17T21:08:42Z

Loader issues fixed by monkey patching what was failing \o/

paul-marechal · 2018-07-19T21:35:25Z

@akosyakov I think I have made good progress, if you want to check now and see if anything looks wrong.

Last bit that bothers me is that www.google.com is a valid URL, so the user can open a new Electron window when inputting it... My idea would be to add some kind of localhost:3000/are-you-theia that would respond with {"answer": "yes"}. What do you think ?

@simark cc in case

packages/monaco/src/browser/monaco-loader.ts

packages/monaco/src/typings/file-icons-js.d.ts

packages/core/src/electron-browser/remote/connection-state-service.ts

packages/core/src/electron-browser/remote/electron-application-location.ts

examples/browser/package.json

paul-marechal · 2018-07-24T12:54:19Z

Current state of the PR is that I am fighting with webpack/electron/packages in order to enable appropriate security settings (such as nodeIntegration: false).

Packages often try to guess the environment, and when they detect Electron they just try to use every NodeJS API they can, when we don't want that.

paul-marechal · 2018-07-26T11:56:27Z

@akosyakov I will consider this feature done, even though some security concerns are not fully taken into account. This doesn't add more security issues than before, as I am still using the mechanics already in place.

My idea is that this is a feature that people could test for themselves and improve upon if they find it useful for their workflow.

@thegecko pinging you in case you want to secure the feature. We could discuss about the technical details if you are interested in this problem.

IMO connecting the Electron application to a remote server is an awesome use case, although my biggest issue right now would be the current instability of the client (the whole app sometimes shutdowns). Point is, for people that prefer native clients like me, being able to connect to workspace servers is very nice.

thegecko · 2018-07-26T12:25:53Z

Thanks for the heads up, I'm away until September when I will be available to revisit security of Theia. In the meantime don't wait on me to merge.

marcdumais-work

Hi Paul,

I did a first pass and have a few comments.

dev-packages/application-manager/src/generator/frontend-generator.ts

marcdumais-work · 2018-08-28T11:13:26Z

dev-packages/application-manager/src/generator/frontend-generator.ts

-        const loadMainWindow = (port) => {
-            mainWindow.loadURL('file://' + join(__dirname, '../../lib/index.html') + '?port=' + port);
+        const loadMainWindow = (uri) => {
+            // mainWindow.loadURL(\`http://localhost:\${port}\`);


left-over code or example of mainWindow.loadURL() usage?

dev-packages/application-manager/src/rebuild.ts

marcdumais-work · 2018-08-30T13:49:21Z

examples/hybrid/package.json

+{
+  "private": true,
+  "name": "@theia/example-hybrid",
+  "version": "0.3.11",


reminder: specific package and dependencies versions will need to be updated to whatever is applicable, at the time we merge.

marcdumais-work · 2018-08-30T13:50:43Z

examples/hybrid/package.json

+    "target": "hybrid"
+  },
+  "dependencies": {
+    "@theia/callhierarchy": "^0.3.11",


also we will need to update the dependencies, that might have changed in the other example applications, in the meantime

packages/core/package.json

paul-marechal · 2018-09-04T17:23:33Z

@marcdumais-work updated.

comments addressed, thanks.

marcdumais-work · 2018-09-19T15:39:40Z

@marechal-p when you have time, it would be good to rebase this PR.

Add a new example package serving both web browsers and electron clients. Add new commands for electron to connect to remote servers. `electron.remote.connect` command to open a QuickOpenMenu and input an URL. `electron.remote.history.clear` command to clear the local URL history. `electron.remote.disconnect` to close the window in case you are connected to a server. Adds an endpoint to tell if it is a Theia application or not. Signed-off-by: Paul Maréchal <paul.marechal@ericsson.com>

paul-marechal · 2018-10-30T13:50:30Z

Based on new discussions and considerations, the following PR is considered as a POC instead, and more thinking would be required before proceeding.

…pse-theia/theia/pull/2340`

paul-marechal requested review from akosyakov and marcdumais-work July 11, 2018 13:45

paul-marechal changed the title ~~mp/example hybrid~~ [wip] mp/example hybrid Jul 11, 2018

paul-marechal changed the title ~~[wip] mp/example hybrid~~ [wip] New @theia/example-hybrid application Jul 11, 2018

paul-marechal changed the title ~~[wip] New @theia/example-hybrid application~~ [wip] New @theia/example-hybrid application Jul 11, 2018

paul-marechal mentioned this pull request Jul 11, 2018

[electron] Make the Browser backend serve the Electron's frontend #2057

Closed

paul-marechal force-pushed the mp/example-hybrid branch from be63c27 to 052ecd4 Compare July 11, 2018 14:52

akosyakov reviewed Jul 12, 2018

View reviewed changes

.gitignore Outdated Show resolved Hide resolved

paul-marechal force-pushed the mp/example-hybrid branch 2 times, most recently from 5e92052 to e28d4fa Compare July 12, 2018 13:48

paul-marechal requested a review from lmcbout July 12, 2018 14:03

paul-marechal force-pushed the mp/example-hybrid branch 2 times, most recently from 18286dd to 9a79a02 Compare July 13, 2018 13:37

paul-marechal force-pushed the mp/example-hybrid branch 6 times, most recently from 0044994 to 616b07a Compare July 19, 2018 21:20

akosyakov reviewed Jul 20, 2018

View reviewed changes

packages/monaco/src/browser/monaco-loader.ts Show resolved Hide resolved

akosyakov reviewed Jul 20, 2018

View reviewed changes

packages/monaco/src/typings/file-icons-js.d.ts Outdated Show resolved Hide resolved

akosyakov reviewed Jul 20, 2018

View reviewed changes

packages/core/src/electron-browser/remote/connection-state-service.ts Outdated Show resolved Hide resolved

akosyakov reviewed Jul 20, 2018

View reviewed changes

packages/core/src/electron-browser/remote/connection-state-service.ts Outdated Show resolved Hide resolved

paul-marechal mentioned this pull request Jul 20, 2018

Electron security considerations #2018

Closed

akosyakov reviewed Jul 24, 2018

View reviewed changes

packages/core/src/electron-browser/remote/electron-application-location.ts Outdated Show resolved Hide resolved

akosyakov reviewed Jul 24, 2018

View reviewed changes

examples/browser/package.json Outdated Show resolved Hide resolved

paul-marechal force-pushed the mp/example-hybrid branch 2 times, most recently from 57ffb75 to 4d07884 Compare July 24, 2018 11:56

paul-marechal force-pushed the mp/example-hybrid branch from de2d2e4 to de476f6 Compare July 26, 2018 11:46

paul-marechal changed the title ~~[wip] New @theia/example-hybrid application~~ New @theia/example-hybrid application Jul 26, 2018

paul-marechal force-pushed the mp/example-hybrid branch 2 times, most recently from e266d90 to d18d9c9 Compare August 10, 2018 12:43

paul-marechal requested review from akosyakov and svenefftinge August 21, 2018 17:28

marcdumais-work previously requested changes Aug 30, 2018

View reviewed changes

paul-marechal force-pushed the mp/example-hybrid branch 2 times, most recently from c08a613 to cc62402 Compare September 4, 2018 15:39

paul-marechal force-pushed the mp/example-hybrid branch from cc62402 to a9506fc Compare September 20, 2018 15:27

paul-marechal closed this Oct 30, 2018

paul-marechal mentioned this pull request Nov 25, 2019

[electron] Connection to a remote backend #2056

Closed

3 tasks

FinnChen referenced this pull request in FinnChen/theia Sep 15, 2022

feat: attempt to adopt @theia/example-hybrid https://github.com/ecli…

35591c2

…pse-theia/theia/pull/2340`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New `@theia/example-hybrid` application #2340

New `@theia/example-hybrid` application #2340

paul-marechal commented Jul 11, 2018 •

edited

Loading

paul-marechal commented Jul 11, 2018 •

edited

Loading

akosyakov left a comment

akosyakov commented Jul 12, 2018

paul-marechal commented Jul 12, 2018

paul-marechal commented Jul 12, 2018 •

edited

Loading

paul-marechal commented Jul 16, 2018

paul-marechal commented Jul 17, 2018

paul-marechal commented Jul 19, 2018

paul-marechal commented Jul 24, 2018

paul-marechal commented Jul 26, 2018

thegecko commented Jul 26, 2018

marcdumais-work left a comment

marcdumais-work Aug 28, 2018

marcdumais-work Aug 30, 2018

marcdumais-work Aug 30, 2018

paul-marechal commented Sep 4, 2018

marcdumais-work commented Sep 19, 2018

paul-marechal commented Oct 30, 2018

New @theia/example-hybrid application #2340

New @theia/example-hybrid application #2340

Conversation

paul-marechal commented Jul 11, 2018 • edited Loading

paul-marechal commented Jul 11, 2018 • edited Loading

akosyakov left a comment

Choose a reason for hiding this comment

akosyakov commented Jul 12, 2018

paul-marechal commented Jul 12, 2018

paul-marechal commented Jul 12, 2018 • edited Loading

paul-marechal commented Jul 16, 2018

paul-marechal commented Jul 17, 2018

paul-marechal commented Jul 19, 2018

paul-marechal commented Jul 24, 2018

paul-marechal commented Jul 26, 2018

thegecko commented Jul 26, 2018

marcdumais-work left a comment

Choose a reason for hiding this comment

marcdumais-work Aug 28, 2018

Choose a reason for hiding this comment

marcdumais-work Aug 30, 2018

Choose a reason for hiding this comment

marcdumais-work Aug 30, 2018

Choose a reason for hiding this comment

paul-marechal commented Sep 4, 2018

marcdumais-work commented Sep 19, 2018

paul-marechal commented Oct 30, 2018

New `@theia/example-hybrid` application #2340

New `@theia/example-hybrid` application #2340

paul-marechal commented Jul 11, 2018 •

edited

Loading

paul-marechal commented Jul 11, 2018 •

edited

Loading

paul-marechal commented Jul 12, 2018 •

edited

Loading