Generate UI not working for Jetbrains dev container

[mligtenberg]

Current Behavior

When running the NX console in a jetbrains dev container (Tested with Webstorm 2024.2 - 2024.3), the generate UI is blank.

Example devcontainer.json:
https://gist.github.com/mligtenberg/343d0e6eab64f1ccd2d9e10656c973de

Expected Behavior

I would expect to see the generation form as can been seen in a non dev container version of Webstorm.

Steps to Reproduce

Clone "https://github.com/nrwl/nx-examples" and create a folder called ".devcontainer" in it

Paste the following file in it (filename "devcontainer.json")
https://gist.github.com/mligtenberg/343d0e6eab64f1ccd2d9e10656c973de

(pull request with these changes will be added shortly)

Open Webstorm, in the welcome screen select dev container

select new dev container and then from local project

Select the devcontainer.json created from the gist, and press build

run npm i --force (currently some dependency is conflicting in nx-examples)
right click on the libs folder and select Nx Generate
create a new library project (I used @nx/angular - library)

the new tab opened will stay blank

This dev container can be started via "Webstorm" or "Gateway"

Failure Logs / Images / Videos

Environment

I'm running on MacOS

• Nx Console version:

• Local: v20.0.0-rc.0

• Global: v20.1.2

• Jetbrains version:

• Webstorm: 2024.3

[mligtenberg]

Small piece of extra info, the output of nx report:

Node : 22.9.0
OS : linux-arm64
Native Target : aarch64-linux
yarn : 1.22.22

nx (global) : 20.1.2
nx : 20.0.0-rc.0
@nx/js : 20.0.0-rc.0
@nx/jest : 20.0.0-rc.0
@nx/eslint : 20.0.0-rc.0
@nx/workspace : 20.0.0-rc.0
@nx/angular : 20.0.0-rc.0
@nx/cypress : 20.0.0-rc.0
@nx/devkit : 20.0.0-rc.0
@nx/eslint-plugin : 20.0.0-rc.0
@nx/react : 20.0.0-rc.0
@nx/web : 20.0.0-rc.0
@nx/webpack : 20.0.0-rc.0
typescript : 5.5.3

Registered Plugins:
@nx/eslint/plugin
@nx/cypress/plugin
@nx/jest/plugin

Community plugins:
@ngrx/component-store : 18.0.2
@ngrx/effects : 18.0.2
@ngrx/entity : 18.0.2
@ngrx/operators : 18.0.2
@ngrx/router-store : 18.0.2
@ngrx/store : 18.0.2
@ngrx/store-devtools : 18.0.2

[MaxKless]

Thanks! I'll look into this when I find the time.
In the meantime, could you provide some logs?
Go to Help > Diagnostic Tools > Debug Log Settings... and then insert #dev.nx.console:trace. Then paste the idea.log or sections of it when the error happens.

[mligtenberg]

So, when using a dev container you have both a host and a client so i did it for both. Here are the results after opening a generate tab

host idea.log: https://gist.github.com/mligtenberg/cb21ed7c7e8ff8e4614b99b7df1a7e60
client idea.log: https://gist.github.com/mligtenberg/45c63345a6064bcccae436baa47a934f

Some facts I discovered after some more exploring is that showing the graph does work.

The difference I found between the generation UI and the graph UI is the way the html is loaded.
In the generate UI the html is loaded via an url registered in the IDE: https://github.com/nrwl/nx-console/blob/master/apps/intellij/src/main/kotlin/dev/nx/console/generate/ui/file/NxGenerateUiFile.kt

in the graph UI it is loaded from HTML:
https://github.com/nrwl/nx-console/blob/master/apps/intellij/src/main/kotlin/dev/nx/console/graph/NxGraphBrowserBase.kt#L76

It could very well be that I'm running into undefined behavior in the JetBrains dev container setup.

[ntrehout]

I'm encountering the same issue while using JetBrains Gateway on a freshly installed Windows system with Ubuntu running under WSL2. When I click on "Generate," the UI opens, but nothing is displayed.

Is there any update on this issue?

[mligtenberg]

I've been doing some debugging and searching and found the culprit. The issue is on the following lines:

nx-console/apps/intellij/src/main/kotlin/dev/nx/console/generate/ui/file/NxGenerateUiFile.kt

Lines 60 to 64 in de5fcb5

	override fun onAfterCreated(browser: CefBrowser) {
	val domainName = "nxconsolev2"
	CefApp.getInstance()
	.registerSchemeHandlerFactory("http", domainName, CustomSchemeHandlerFactory())
	browser.loadURL("http://$domainName/index.html")

The issue is described in the following issue with Jetbrains including a work around:
https://youtrack.jetbrains.com/issue/IJPL-170861/CefAppregisterSchemeHandlerFactory-has-no-effect-in-remote-IDE

The lines above registers the Generate UI under a custom http://nxconsolev2/ address. The basic issue is that CefApp is the Chromium App in the current IDE. Container app make use of a remote IDE backend. Which means that the CefApp call above would register the call in the IDE in the container (the remote backend). The Jetbrains client has it's own CefApp that has no idea of the custom domain registered.

The current workaround is to introduce a custom requestHandler via the browser.jbCefClient.addRequestHandler API.
Though I did not get it to work yet

[ntrehout]

Hi ! Any news about this ? It's very frustrating to use NX in WSL environment 😅

[MaxKless]

Thanks for the research @mligtenberg :) Sorry I missed your comment update before. I will look into this fix and see what I can do. Thanks for linking to the youtrack issue.

[ntrehout]

Hi ! Any news about this ? @MaxKless

It's so sad to not be able to use fully NX in a WSL env :(