How to build a desktop-based coffee editor? #121

serena-bc · 2022-02-28T14:47:51Z

serena-bc
Feb 28, 2022

Hi,

I am trying to build a desktop-based coffee editor (only coffee-server and coffee-editor-extension extensions) using Theia blueprint (1.23.0) as template. Unfortunately, I can not get it to work so I am thinking using Theia blueprint was maybe not the right approach. Could you give me some pointers on how to build a desktop-based coffee editor please?

Thanks for your help!

Answered by vhemery

Feb 28, 2022

The best starting point is your corresponding web-based coffee editor.
Then, you have to make an "electron-app" project which looks like the "browser-app" project, only for launching with electron.
You will have to look at electron-builder for learning the launch options. https://www.electron.build/
Personally, I relied on the example from https://github.com/theia-ide/theia-apps/tree/master/theia-electron
but that was before the Theia blueprint, so I guess the blueprint should be fine too...
You should be able to adapt the run.sh from the coffee editor to launch the electron-app workspace instead.

On the environment side, you need Visual Studio C++ Build Tools installed to be able to gene…

View full answer

vhemery · 2022-02-28T15:21:23Z

vhemery
Feb 28, 2022
Collaborator

The best starting point is your corresponding web-based coffee editor.
Then, you have to make an "electron-app" project which looks like the "browser-app" project, only for launching with electron.
You will have to look at electron-builder for learning the launch options. https://www.electron.build/
Personally, I relied on the example from https://github.com/theia-ide/theia-apps/tree/master/theia-electron
but that was before the Theia blueprint, so I guess the blueprint should be fine too...
You should be able to adapt the run.sh from the coffee editor to launch the electron-app workspace instead.

On the environment side, you need Visual Studio C++ Build Tools installed to be able to generate the installer or launch. Read the license carefully, and ask yourself seriously whether you need to buy a license or not.

If you have difficulties, do not hesitate to post the errors here...
(I have a README.md full with errors you may encounter and the corresponding fixes, but some instructions may be too specific for my project and I do not have the time to filter it out...)

3 replies

vhemery Mar 1, 2022
Collaborator

Here are a few usefull trouleshooting from my README.md that I filtered...

Troubleshooting

npm update check failed

When during your npm install build you get the message

lerna ERR! ┌──────────────────────────────────────────────────────────────┐
lerna ERR! │                   npm update check failed                    │
lerna ERR! │             Try running with sudo or get access              │
lerna ERR! │             to the local update config store via             │
lerna ERR! │ sudo chown -R $USER:$(id -gn $USER) d:\Users\<login>\.config │
lerna ERR! └──────────────────────────────────────────────────────────────┘

Try and delete the folder d:\Users\<login>\.config then run yarn install again.

Stuck on Downloading vscode-ripgrep with Invoke-WebRequest

During build, you get stuck on something like :

> [email protected] postinstall D:\Users\<login>\<ProjectPath>\node_modules\vscode-ripgrep
> node ./lib/postinstall.js

Finding release for v12.1.1
GET https://api.github.com/repos/microsoft/ripgrep-prebuilt/releases/tags/v12.1.1
Downloading from https://api.github.com/repos/microsoft/ripgrep-prebuilt/releases/assets/22625168
Downloading to D:\Users\<login>\AppData\Local\Temp\vscode-ripgrep-cache-1.9.0\ripgrep-v12.1.1-x86_64-pc-windows-msvc.zip
Downloading with Invoke-WebRequest

or with yarn

[4/4] Building fresh packages...
[-/15] ? waiting...
[-/15] ? waiting...
[-/15] ? waiting...
[9/15] ? vscode-ripgrep
[-/15] ? waiting...

You may try using a github api token to ease the download (there is a quota per proxy URI otherwise). If you have a github account, go to https://github.com/settings/tokens to generate a new token, then insert it in your environment or configuration script (export GITHUB_TOKEN=<yourGitHubPersonalAccessToken>).

Alternatively, you may try to simply download the file manually.
In this example, download https://github.com/microsoft/ripgrep-prebuilt/releases/download/v12.1.1/ripgrep-v12.1.1-x86_64-pc-windows-msvc.zip to the indicating folder.

Also try and run

cd ui-packages
npm install vscode-ripgrep@^1.2.5

If error persists, you may also try and upgrade Powershell or change your Node version...
yarnpkg/yarn#7450 microsoft/vscode-ripgrep#6

You will find Powershell 5.1 download on https://docs.microsoft.com/en-us/powershell/scripting/windows-powershell/wmf/setup/install-configure?view=powershell-7 which requires admin rights...

Finally, relaunch the build.

Multiples Typescript errors

Multiple Typescript errors occur, such as :

<project>-backend-extension: src/browser/backend-contribution.ts(1,36): error TS2307: Cannot find module 'inversify' or its corresponding type declarations.
<project>-backend-extension: src/browser/backend-contribution.ts(2,122): error TS2307: Cannot find module '@theia/core/lib/common' or its corresponding type declarations.
<project>-backend-extension: src/browser/backend-contribution.ts(3,31): error TS2307: Cannot find module '@theia/core/lib/browser' or its corresponding type declarations.
<project>-backend-extension: src/browser/frontend-extension.ts(1,55): error TS2307: Cannot find module '@theia/core' or its corresponding type declarations.
<project>-backend-extension: src/browser/frontend-extension.ts(2,45): error TS2307: Cannot find module '@theia/core/lib/browser' or its corresponding type declarations.
<project>-backend-extension: src/browser/frontend-extension.ts(3,33): error TS2307: Cannot find module 'inversify' or its corresponding type declarations.
<project>-backend-extension: src/browser/frontend-extension.ts(8,36): error TS7006: Parameter 'bind' implicitly has an 'any' type.
<project>-backend-extension: src/browser/frontend-extension.ts(12,39): error TS7006: Parameter 'ctx' implicitly has an 'any' type.

Run npm i -g @theia/electron in ui-packages folder, then yarn.

Cannot read property 'match' of undefined

npm ERR! Cannot read property 'match' of undefined

npm ERR! A complete log of this run can be found in:
npm ERR!     d:\Users\<login>\AppData\Roaming\npm-cache\_logs\2020-10-06T11_34_01_489Z-debug.log

Just run

cd ui-packages
rm -rf package-lock.json node_modules && rm -rf */package-lock.json */node_modules

And you should be back on track.

This solution should also work for other errors like :

error An unexpected error occurred: "EPERM: operation not permitted, unlink 'D:\\Users\\<login>\\<projectPath>\\node_modules\\electron\\dist\\electron.exe'".

Cannot find module typescript

Error: Cannot find module 'D:\Users\<login>\<projectPath>\node_modules\typescript\bin\tsc'

Run

cd ui-packages
npm install -g typescript
npm install typescript --save-dev

Cannot find module '...\electron-builder\out\cli\cli.js'

error D:\Users\<login>\<projectPath>\node_modules\electron-app: Command failed.
Exit code: 1
Command: electron-builder install-app-deps
Arguments:
Directory: D:\Users\<login>\<projectPath>\node_modules\electron-app
Output:
internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'D:\Users\<login>\<projectPath>\node_modules\node_modules\electron-builder\out\cli\cli.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {

The command electron-builder is executed from //node_modules/electron-app/node_modules/.bin/electron-builder.cmd
Remove "electron-builder" from "devDependencies" in electron-app's package.json. This dependency should be added in the root package.json only.

The module '<native dependency>' was compiled against a different Node.js version

Error: The module '\\?\D:\Users\<login>\<projectPath>\node_modules\drivelist\build\Release\drivelist.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 80. This version of Node.js requires
NODE_MODULE_VERSION 72. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).

If you got this error while trying to start electron-app you just need to call rebuild:electron already included in the script.
If you got this error while trying to start browser-app you'll have to rebuild the native dependencies before launching the browser app again. (eclipse-theia/theia#8454 should fix it)

cd ui-packages
npm rebuild --update-binary

Module not found: Error: Can't resolve 'tls'

ERROR in ../node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'D:\Users\<login>\<projectPath>\node_modules\forever-agent'
@ ../node_modules/forever-agent/index.js 7:10-24
@ ../node_modules/request/request.js
@ ../node_modules/request/index.js
@ ../node_modules/@theia/application-package/lib/npm-registry.js
@ ../node_modules/@theia/application-package/lib/index.js
@ ../node_modules/@theia/core/lib/node/backend-application.js
@ ../node_modules/@theia/core/lib/node/index.js
@ ../@discoui/core/lib/browser/disco-core-contribution.js
@ ../@discoui/core/lib/browser/disco-core-frontend-module.js
@ ./src-gen/frontend/index.js

If you got this kind of error during the webpack part or the yarn, you may have an invalid import.
Check your latest unstable modifications and look for an import of a "node" backend dependency in your "browser" frontend.
E.g. import { FileUri } from '@theia/core/lib/node'; in an src/browser/....ts file.

serena-bc Mar 1, 2022
Author

Thank you very much for your very detailed answer!

I am developing on a Linux Centos platform with no admin right so up to now I have been using Spack to meet Theia & Theia blueprint development requirements.

Is there a reason why the requirements of a desktop-based coffee editor should differ from https://github.com/eclipse-theia/theia/blob/master/doc/Developing.md#prerequisites?

I will update on my progress and errors as I encounter them but it might take me some time since I am new to node.js, Theia, Typescript...

vhemery Mar 1, 2022
Collaborator

Visual Studio C++ Build Tools was for windows, so you should be able to get rid of this most annoying part. ;)
The basic requirements should be the same for both, only the yarn dependencies will differ for the front part.
In addition, for the coffee editor, you have the backend server, but I don't expect any difficulty from this side.

Make sure you first succeed in :

launching the coffee editor as web
launching theia blueprint as electron

Then, when both work, you can try and mix both to bring electron in your coffee editor.

serena-bc · 2022-03-08T09:28:54Z

serena-bc
Mar 8, 2022
Author

Front-end is not starting with electron: when I try to run the coffee editor example It gets stuck at a loading screen and there is no plugin contributions to the menu bar.
I compared logs from browser and electron runs, they are quite similar except that electron logs end with:
root INFO Deploy plugins list took: 26162.3 ms
and browser logs display status changes:
root INFO Deploy plugins list took: 31283.6 ms [...] root WARN Frontend EditorNavigationContribution.onStart is slow, took: 585.0 ms root INFO ModelServerBackendContribution: 0 [qtp1706655559-47] DEBUG ModelServerRoutingV1 - SERVER_CONFIGURE started root INFO Changed application state from 'init' to 'started_contributions'.
...
I have no idea where it went wrong, I tried to add a workspace as an argument, to no avail.
Maybe there is something wrong with the start cmd line?
export WF_CONFIG_LSP=localhost:5017 && electron scripts/theia-electron-main.js --WORKFLOW_NOTATION_LSP=5008 --root-dir=../../backend/examples/SuperBrewer3000 --plugins=local-dir:./plugins

8 replies

eneufeld Mar 15, 2022
Maintainer

@serena-bc is this answered for you?

serena-bc Mar 15, 2022
Author

Yes, I have access to this view and there is an error:
Uncaught ReferenceError: global is not defined at jsonp chunk loading:84 at jsonp chunk loading:86 at startup:4
Thanks for the tip!
Any clue what would cause this?

serena-bc Mar 15, 2022
Author

@eneufeld : It helped but no, I am trying to figure out how to get rid of this error to run the coffee editor example with electron.

eneufeld Mar 15, 2022
Maintainer

This looks like a bundling error. Could you try to rebuild and check whether there are errors during the build?

serena-bc Mar 15, 2022
Author

There were errors during this build that made me change my Electron version from 15.3.7 to 9.3.3 (as shown in
vhemery example) .
Got still one error (libXss.so.1 was missing) left because I forgot to load libxscrnsaver module.
Now it works, thank you both!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to build a desktop-based coffee editor? #121

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 11 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to build a desktop-based coffee editor? #121

serena-bc Feb 28, 2022

Replies: 2 comments · 11 replies

vhemery Feb 28, 2022 Collaborator

vhemery Mar 1, 2022 Collaborator

Troubleshooting

npm update check failed

Stuck on Downloading vscode-ripgrep with Invoke-WebRequest

Multiples Typescript errors

Cannot read property 'match' of undefined

Cannot find module typescript

Cannot find module '...\electron-builder\out\cli\cli.js'

The module '<native dependency>' was compiled against a different Node.js version

Module not found: Error: Can't resolve 'tls'

serena-bc Mar 1, 2022 Author

vhemery Mar 1, 2022 Collaborator

serena-bc Mar 8, 2022 Author

eneufeld Mar 15, 2022 Maintainer

serena-bc Mar 15, 2022 Author

serena-bc Mar 15, 2022 Author

eneufeld Mar 15, 2022 Maintainer

serena-bc Mar 15, 2022 Author

serena-bc
Feb 28, 2022

Replies: 2 comments 11 replies

vhemery
Feb 28, 2022
Collaborator

vhemery Mar 1, 2022
Collaborator

serena-bc Mar 1, 2022
Author

vhemery Mar 1, 2022
Collaborator

serena-bc
Mar 8, 2022
Author

eneufeld Mar 15, 2022
Maintainer

serena-bc Mar 15, 2022
Author

serena-bc Mar 15, 2022
Author

eneufeld Mar 15, 2022
Maintainer

serena-bc Mar 15, 2022
Author