theia-blueprint icon indicating copy to clipboard operation
theia-blueprint copied to clipboard

initial implementation of an executable server

Open paul-marechal opened this issue 3 years ago • 29 comments

The goal of this PR is to setup a browser version of Blueprint packaged as a "drag and drop" solution that's easy to deploy.

The setup is a bit tricky and might not apply well to every kind of product made using the Theia framework, but it should work for most usages.

Add theia-blueprint-browser Theia extension that contributes the required customizations to run in the packaged environment (mostly to accommodate to the new file layout).

Use a node-specific Webpack configuration to bundle the backend along with the browser-specific customizations.

Use a forked pkg package to support forking child processes with execArgv options. The fork is setup as a git submodule.

Upstream patches to pkg

  • https://github.com/vercel/pkg/pull/1157
  • https://github.com/vercel/pkg/pull/1435

How to test

Run:

# setup git submodules
git submodule update --init

# build and package
yarn && yarn browser bundle && yarn browser package

This should result in the browser application being packaged into applications/browser/packaged.

Review checklist

Reminder for reviewers

paul-marechal avatar Oct 12 '21 22:10 paul-marechal

@vince-fugnitto @marcdumais-work I am seeing errors coming from a few builtins, do you guys know if this is expected?

paul-marechal avatar Oct 12 '21 22:10 paul-marechal

I was wondering what would be good to do in this PR before merging it in master:

  • Do we want a CI that publishes this new application?
  • Is there any particular utilization case that is currently missing and that should be contributed via Theia extension?
  • Is there any weird bugs with the packaged version that need fixing?

I'd like help to try on different platforms as well. I only tested from Windows 10.

paul-marechal avatar Oct 12 '21 22:10 paul-marechal

One thing I noticed: the help -> about dialog seems broken.

marcdumais-work avatar Oct 27 '21 20:10 marcdumais-work

Here are the vscode extensions that seem to fail for me at startup (more might when e.g. .a new LS is triggered):

  • vscode.merge-conflict
  • vscode.emmet
  • vscode.npm

More from backend startup log:

root INFO [hosted-plugin: 14507] PLUGIN_HOST(14507): PluginManagerExtImpl/loadPlugin(/opt/ericsson-dev/theia-blueprint/applications/browser/packaged/builtins/vscode.merge-conflict/extension/dist/mergeConflictMain) root ERROR [hosted-plugin: 14507] Activating extension 'Merge Conflict (built-in)' failed: TypeError: i.id.endsWith is not a function at Object.loadPlugin (/snapshot/theia-blueprint/applications/browser/bundled/plugin-host.js:1:429) at /snapshot/theia-blueprint/applications/browser/bundled/921.js:1:166617 at processTicksAndRejections (internal/process/task_queues.js:97:5) at async l.$activatePlugin (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167690) at async Promise.all (index 0) at async l.activateBySingleEvent (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167592) at async l.$activateByEvent (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167258) root INFO [hosted-plugin: 14507] PLUGIN_HOST(14507): PluginManagerExtImpl/loadPlugin(/opt/ericsson-dev/theia-blueprint/applications/browser/packaged/builtins/vscode.emmet/extension/dist/node/emmetNodeMain) root ERROR [hosted-plugin: 14507] Activating extension 'Emmet (built-in)' failed: TypeError: i.id.endsWith is not a function at Object.loadPlugin (/snapshot/theia-blueprint/applications/browser/bundled/plugin-host.js:1:429) at /snapshot/theia-blueprint/applications/browser/bundled/921.js:1:166617 at processTicksAndRejections (internal/process/task_queues.js:97:5) at async l.$activatePlugin (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167690) at async Promise.all (index 1) at async l.activateBySingleEvent (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167592) at async l.$activateByEvent (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167258) root INFO [hosted-plugin: 14507] PLUGIN_HOST(14507): PluginManagerExtImpl/loadPlugin(/opt/ericsson-dev/theia-blueprint/applications/browser/packaged/builtins/vscode.npm/extension/dist/npmMain) root ERROR [hosted-plugin: 14507] Activating extension 'NPM support for VS Code (built-in)' failed: TypeError: i.id.endsWith is not a function at Object.loadPlugin (/snapshot/theia-blueprint/applications/browser/bundled/plugin-host.js:1:429) at /snapshot/theia-blueprint/applications/browser/bundled/921.js:1:166617 at processTicksAndRejections (internal/process/task_queues.js:97:5) at async l.$activatePlugin (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167690) at async Promise.all (index 0) at async l.activateBySingleEvent (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167592) at async l.$activateByEvent (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167258) root INFO [5b44c0a8-6407-43bf-ad2b-8228f1da8e98] Start of 85 plugins took: 731.6 ms [Finished 4.769 s after frontend start]

marcdumais-work avatar Nov 15 '21 19:11 marcdumais-work

When I try to search for a file in the repo (Ctrl-p), it's not able to spawn ripgrep:

root ERROR Failed to search: file:///opt/ericsson-dev/theia-blueprint Error: spawn /opt/ericsson-dev/theia-blueprint/applications/browser/packaged/bin/rg EACCES at Process.ChildProcess._handle.onexit (internal/child_process.js:268:19) at onErrorNT (internal/child_process.js:470:16) at processTicksAndRejections (internal/process/task_queues.js:84:21)

I notice the ripgrep executable does not have execute permission. If I manually add it (chmod +x <rg executable>, now search works.

marcdumais-work avatar Nov 15 '21 20:11 marcdumais-work

I missed a few non-working extensions (or at least extensions that throw exceptions at startup):

  • vscode.git
  • vscode.debug-auto-launch
  • vscode.typescript-language-features
  • vscode.json-language-features/
  • vscode.configuration-editing

marcdumais-work avatar Nov 15 '21 20:11 marcdumais-work

Many seem to have this same error: TypeError: i.id.endsWith is not a function

Couple of example:

root INFO [hosted-plugin: 14507] PLUGIN_HOST(14507): PluginManagerExtImpl/loadPlugin(/opt/ericsson-dev/theia-blueprint/applications/browser/packaged/builtins/vscode.json-language-features/extension/client/dist/node/jsonClientMain)
root ERROR [hosted-plugin: 14507] Activating extension 'JSON Language Features (built-in)' failed: TypeError: i.id.endsWith is not a function
    at Object.loadPlugin (/snapshot/theia-blueprint/applications/browser/bundled/plugin-host.js:1:429)
    at /snapshot/theia-blueprint/applications/browser/bundled/921.js:1:166617
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async l.$activatePlugin (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167690)
    at async Promise.all (index 1)
    at async l.activateBySingleEvent (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167592)
    at async l.$activateByEvent (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167258)
    at async l.$start (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:165034)
root ERROR [hosted-plugin: 14507] Activating extension 'Node Debug Auto-attach (built-in)' failed: TypeError: i.id.endsWith is not a function
    at Object.loadPlugin (/snapshot/theia-blueprint/applications/browser/bundled/plugin-host.js:1:429)
    at /snapshot/theia-blueprint/applications/browser/bundled/921.js:1:166617
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async l.$activatePlugin (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167690)
    at async Promise.all (index 2)
    at async l.activateBySingleEvent (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167592)
    at async l.$activateByEvent (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:167258)
    at async l.$start (/snapshot/theia-blueprint/applications/browser/bundled/921.js:1:164967)

marcdumais-work avatar Nov 15 '21 20:11 marcdumais-work

Many seem to have this same error: TypeError: i.id.endsWith is not a function

seems to come from new code: https://github.com/eclipse-theia/theia-blueprint/pull/168/files#diff-f909d9e80fd47722da8e8ea2c689895ecfe35d5e60adfc9040af4fad1397b9b7R32

marcdumais-work avatar Nov 15 '21 20:11 marcdumais-work

seems to come from new code: https://github.com/eclipse-theia/theia-blueprint/pull/168/files#diff-f909d9e80fd47722da8e8ea2c689895ecfe35d5e60adfc9040af4fad1397b9b7R32

node function being called in browser context?

edit: I mean require of line 30: https://github.com/eclipse-theia/theia-blueprint/pull/168/files#diff-f909d9e80fd47722da8e8ea2c689895ecfe35d5e60adfc9040af4fad1397b9b7R30

marcdumais-work avatar Nov 15 '21 20:11 marcdumais-work

Many seem to have this same error: TypeError: i.id.endsWith is not a function

seems to come from new code: https://github.com/eclipse-theia/theia-blueprint/pull/168/files#diff-f909d9e80fd47722da8e8ea2c689895ecfe35d5e60adfc9040af4fad1397b9b7R32

I might have a fix for this locally that I did not push yet. This code is a copy/paste of the original implementation with the intent of fixing this i.id.endsWith is not a function error. When bundled using Webpack, module reflection like this doesn't seem to work well anymore. I think it used to, but now doesn't for some reason... I'll push my changes once I get back to it.

paul-marechal avatar Nov 15 '21 20:11 paul-marechal

OK I figured out this specific error: I had set the node webpack config to development mode locally, for debugging purposes. But when pushing I reverted back to production mode. Turns out in production mode Webpack gives numerical ids to modules, and the code expects strings.

I just fixed this specific issue and rebased.

Now I think the biggest issue is getting TypeScript to run.

paul-marechal avatar Nov 15 '21 23:11 paul-marechal

Thanks for the update Paul. Now it fails for me during yarn browser bundle:

18 warnings have detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in 684.js 684.js from Terser plugin Unexpected token: punc ()) [684.js:2317,38] at js_error (/opt/ericsson-dev/theia-blueprint/node_modules/terser/dist/bundle.min.js:550:11) at croak (/opt/ericsson-dev/theia-blueprint/node_modules/terser/dist/bundle.min.js:1274:9) at token_error (/opt/ericsson-dev/theia-blueprint/node_modules/terser/dist/bundle.min.js:1282:9) at unexpected (/opt/ericsson-dev/theia-blueprint/node_modules/terser/dist/bundle.min.js:1288:9) at semicolon (/opt/ericsson-dev/theia-blueprint/node_modules/terser/dist/bundle.min.js:1326:56) at simple_statement (/opt/ericsson-dev/theia-blueprint/node_modules/terser/dist/bundle.min.js:1583:73) at statement (/opt/ericsson-dev/theia-blueprint/node_modules/terser/dist/bundle.min.js:1396:19) at embed_tokens_wrapper (/opt/ericsson-dev/theia-blueprint/node_modules/terser/dist/bundle.min.js:1339:26) at block (/opt/ericsson-dev/theia-blueprint/node_modules/terser/dist/bundle.min.js:2172:20) at _function_body (/opt/ericsson-dev/theia-blueprint/node_modules/terser/dist/bundle.min.js:2084:21)

marcdumais-work avatar Nov 16 '21 16:11 marcdumais-work

Maybe relevant, I have interesting warnings just before the failure, that I do not remember seeing before. Several similar to this:

WARNING in ../../node_modules/@theia/node-pty/lib/windowsPtyAgent.js 35:35-74 Module not found: Error: Can't resolve '../build/Release/conpty.node' in '/opt/ericsson-dev/theia-blueprint/node_modules/@theia/node-pty/lib' @ ../../node_modules/@theia/node-pty/lib/windowsTerminal.js 22:24-52 @ ../../node_modules/@theia/node-pty/lib/index.js 10:19-63 @ ../../node_modules/@theia/process/lib/node/terminal-process.js 36:19-45 @ ../../node_modules/@theia/process/lib/node/process-backend-module.js 20:27-56 @ ./src-gen/backend/server.js 48:47-104 @ ./src-gen/backend/main.js 10:21-40

WARNING in ../../node_modules/@theia/node-pty/lib/windowsPtyAgent.js 39:39-76 Module not found: Error: Can't resolve '../build/Debug/conpty.node' in '/opt/ericsson-dev/theia-blueprint/node_modules/@theia/node-pty/lib' @ ../../node_modules/@theia/node-pty/lib/windowsTerminal.js 22:24-52 @ ../../node_modules/@theia/node-pty/lib/index.js 10:19-63 @ ../../node_modules/@theia/process/lib/node/terminal-process.js 36:19-45 @ ../../node_modules/@theia/process/lib/node/process-backend-module.js 20:27-56 @ ./src-gen/backend/server.js 48:47-104 @ ./src-gen/backend/main.js 10:21-40

marcdumais-work avatar Nov 16 '21 16:11 marcdumais-work

Yikes, since the rebase a new version of a source parser dependency used for minification might be bogus :S

edit: They patched it and we now depend on the bug-free library!

paul-marechal avatar Nov 18 '21 19:11 paul-marechal

After cloning with submodules and attempting to build with yarn, I get quite a few errors when building with pkg. Examples are: pkg: ../../node_modules/@types/react-virtualized/node_modules/@types/react/index.d.ts(3100,14): error TS2300: Duplicate identifier 'LibraryManagedAttributes'. pkg: ../../node_modules/@types/react-virtualized/node_modules/@types/react/index.d.ts(3111,13): error TS2717: Subsequent property declarations must have the same type. Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.

ballcoach12 avatar Dec 06 '21 16:12 ballcoach12

@ballcoach12 I am unable to reproduce your build issue. Make sure you are using the latest yarn and that your git index is clean: the pkg submodule should point to commit 588a440533a7f198dd089ce4d357b8ba71257aaf from https://github.com/marechal-p/pkg.git.

paul-marechal avatar Dec 06 '21 16:12 paul-marechal

The electron app/packages do not seem to start. This happens whether or not I previously bundle/package for the browser: (note: I tested the latest master and confirmed that the problem seems specific to this PR)

applications/electron/dist$ ./TheiaBlueprint.AppImage 
A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module '../src-gen/frontend/electron-main.js'
Require stack:
- /tmp/.mount_TheiaBBtgk5V/resources/app/scripts/theia-electron-main.js
- 
    at Module._resolveFilename (internal/modules/cjs/loader.js:797:17)
    at Function.o._resolveFilename (electron/js2c/browser_init.js:281:681)
    at Module._load (internal/modules/cjs/loader.js:690:27)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/tmp/.mount_TheiaBBtgk5V/resources/app/scripts/theia-electron-main.js:16:1)
    at Module._compile (internal/modules/cjs/loader.js:967:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1004:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)

The same happens with the unpacked version.

marcdumais-work avatar Dec 07 '21 19:12 marcdumais-work

@marcdumais-work I had disabled the prepare script for Electron temporarily because it kept building the native modules for it when doing yarn: This caused me problems on the browser version. Should be fixed now.

paul-marechal avatar Dec 07 '21 20:12 paul-marechal

@ballcoach12 I am unable to reproduce your build issue. Make sure you are using the latest yarn and that your git index is clean: the pkg submodule should point to commit 588a440533a7f198dd089ce4d357b8ba71257aaf from https://github.com/marechal-p/pkg.git.

In my case, we are behind a proxy; so the issues I'm seeing are identical to https://github.com/eclipse-theia/theia/issues/10267. So it doesn't appear to be related to this PR.

ballcoach12 avatar Dec 08 '21 16:12 ballcoach12

CI is failing and I have no clue why, but other than this Blueprint Web should build again!

I'll upstream some patches I had to make to pkg to get it to work again.

paul-marechal avatar Dec 10 '21 20:12 paul-marechal

CI is failing and I have no clue why

Locally I get this test failure: "Element with selector "#vsx-extensions:builtin .theia-TreeContainer" not found"

2021-12-13T16:27:38.723Z INFO devtools: COMMAND findElement("css selector", "#vsx-extensions:builtin .theia-TreeContainer") 2021-12-13T16:27:38.726Z INFO devtools: RESULT Error: Element with selector "#vsx-extensions:builtin .theia-TreeContainer" not found at DevToolsDriver.findElement (/opt/ericsson-dev/theia-blueprint/node_modules/devtools/build/utils.js:78:16) at processTicksAndRejections (internal/process/task_queues.js:97:5) at async Browser.wrappedCommand (/opt/ericsson-dev/theia-blueprint/node_modules/devtools/build/devtoolsdriver.js:62:26) at async Browser.runCommandWithHooks (/opt/ericsson-dev/theia-blueprint/node_modules/@wdio/sync/build/wrapCommand.js:70:25) 2021-12-13T16:27:38.758Z INFO devtools: COMMAND findElements("css selector", "#vsx-extensions:builtin .theia-TreeContainer")

marcdumais-work avatar Dec 13 '21 16:12 marcdumais-work

@paul-marechal the latest yarn.lock is not checked in. Maybe related, on Linux the package does not start for me.

$ ./packaged/blueprint.exe 
[...]
Error: node-loader:
Error: /tmp/pkg/694f1da7fa5cb433d1e9645b71e964d078001515fe7d30a7e0105232de015663/drivelist.node: cannot open shared object file: No such file or directory
    at Object.20840 (/snapshot/theia-blueprint/applications/browser/bundled/249.js:2:2068497)
    at o (/snapshot/theia-blueprint/applications/browser/bundled/blueprint.js:1:10120)
    at e.exports (/snapshot/theia-blueprint/applications/browser/bundled/blueprint.js:1:82)
    at Object.60841 (/snapshot/theia-blueprint/applications/browser/bundled/249.js:2:1363319)
    at o (/snapshot/theia-blueprint/applications/browser/bundled/blueprint.js:1:10120)
    at Object.74102 (/snapshot/theia-blueprint/applications/browser/bundled/249.js:2:105092)
    at o (/snapshot/theia-blueprint/applications/browser/bundled/blueprint.js:1:10120)
    at Object.54406 (/snapshot/theia-blueprint/applications/browser/bundled/249.js:2:106592)
    at o (/snapshot/theia-blueprint/applications/browser/bundled/blueprint.js:1:10120)
    at Object.27846 (/snapshot/theia-blueprint/applications/browser/bundled/249.js:2:92421)

marcdumais-work avatar Dec 15 '21 15:12 marcdumais-work

@marcdumais-work the latest issue you are reporting is fixed in a newer version of the pkg fork. That and the outdated yarn.lock makes me think that you have an out of date checkout of the branch, do you mind trying to fetch and force reset?

paul-marechal avatar Dec 16 '21 01:12 paul-marechal

Thanks @paul-marechal - I will be sure to -ff it too, when I retry :)

marcdumais-work avatar Dec 16 '21 15:12 marcdumais-work

Even starting with a fresh clone, I was not able to get the PR to work.

@vince-fugnitto confirmed offline that he has the startup crash too, like above.

marcdumais-work avatar Dec 20 '21 19:12 marcdumais-work

ETA: Everything but JS debugging seems to be working. We are struggling to find why we can't debug JS. Once this issue is solved it should be good to go.

paul-marechal avatar Jan 27 '22 16:01 paul-marechal

There was a bug on Windows that froze the backend completely when trying to open a terminal. This is now fixed.

I also got rid of the Git submodule in favor of patch-package.

Node.js 16 is now required to build the browser package.

paul-marechal avatar Mar 11 '22 17:03 paul-marechal

@jfaltermeier I have been referred to you to get help with building the browser binaries on Jenkins? I have no idea where to start with this, or how to test that the configuration works?

Here are the build steps for the browser package:

yarn
yarn browser bundle
yarn browser package

The output will be the whole contents of applications/browser/packaged/*: it includes the node binary as well as folders for the frontend bundles, builtin plugins and extra binaries (e.g. ripgrep).

paul-marechal avatar Mar 11 '22 17:03 paul-marechal

Hi @paul-marechal , the starting point would be the Jenkinsfile in the root of the git repository, especially the def buildInstaller() part. There you can add the additional build steps. When you edit the title of the PR to include jenkins, it should get built on the Eclipse CI as well (https://ci.eclipse.org/theia/job/Theia%20PRs/view/change-requests/).

You could temporarily add an archiveArtifacts step (https://www.jenkins.io/doc/pipeline/steps/core/#archiveartifacts-archive-the-artifacts) to the pipeline to store the results on Jenkins for testing. Probabily similar to this: archiveArtifacts artifacts: 'applications/browser/packaged/**', fingerprint: false (from a former testing PR: https://github.com/eclipse-theia/theia-blueprint/commit/7c4001203ad396bb745212dcefc41a421770c86c#diff-e6ffa5dc854b843b3ee3c3c28f8eae2f436c2df2b1ca299cca1fa5982e390cf8)

In the long run there are also groovy functions defined for signing and notarizing (on Mac), and finally to upload the results to download.eclipse.org. Also there is the next/Jenkinsfile, which is a nightly build that consumes the next version of Theia to help us identify any breaking changes early. Those have to be adjusted as well, in the long run.

But I guess a good first step would be to have the browser package available for testing from Jenkins.

Please let me know if there are any problems

jfaltermeier avatar Mar 14 '22 09:03 jfaltermeier

Closing because backend bundling will be taken care of by https://github.com/eclipse-theia/theia/pull/12412

paul-marechal avatar Apr 17 '23 17:04 paul-marechal