Brand new Electron app can not be packaged

[faribauc]

Describe the bug
Error: ENOENT: no such file or directory, open '/home/path/to/project/dist/apps/desktop-app-electron/index.js'

To Reproduce
Steps to reproduce the behavior:

1. npx create-nx-workspace@latest --preset=angular-monorepo --name=org --appName=renderer --e2eTestRunner=cypress --style=css --bundler=esbuild --nxCloud --ci=bitbucket-pipelines --ssr
2. cd org
3. npm install -D nx-electron
4. nx g nx-electron:app electron --frontendProject=renderer --directory=desktop-app
5. nx build renderer
6. nx build desktop-app-electron
7. run desktop-app-electron:package
8. See error

The folder structure created by nx g nx-electron is apps/desktop-app/electron, not apps/desktop-app-electron.

Expected behavior
The proper project path should be user.

Desktop (please complete the following information):

• OS: Ubuntu 20
• Nx Electron Version 17.0.1

[faribauc]

Note that the goal here is to get an unassisted process working from A to Z.

You can get the expected behaviour by passing --directory="" instead.

[bennymeg]

The folder structure created by nx g nx-electron is apps/desktop-app/electron, not apps/desktop-app-electron.

The plugin currently depends on that all the applications reside directly under /apps
--directory should be ..

[faribauc]

@bennymeg That was the first thing I tried, but that resulted in the project name being set to .-desktop-app. Using an empty string with --directory seems to have the same effect as just pressing Enter when asked by the CLI, which was the desired result.

And to your point, wouldn't that make the --directory option incompatible with the plugin?

[bennymeg]

Then it might be a change in the nx console.
Whan version are you using? I will check it out.

[faribauc]

@bennymeg I'm using Nx 17.1.3

Thanks!

[briermay]

I know this is old but putting this here for anyone having this issue still. I found the root cause of this, and its an update to how angular builds its apps. the default angular builder even if your not using SSR creates a browser sub folder in the output directory. you have to make a change to 2 files in your angular project that the electron is using as its backend.

#1 in the project.json change:
"executor": "@angular-devkit/build-angular:application"
to:
"executor": "@angular-devkit/build-angular:browser-esbuild"
under the MAIN build (close to the top of the file) also right under that in the options change browser option to main, ie mine looks like this:
"main": "apps/ui/src/main.ts",

#2 now at the ROOT of the repo in the package.json add:

"build": {
		"appId": "com.yourorg.appname",
		"productName": "appname"
},

with the appropriate names for your setup.
after this nx build and nx package should work perfectly

sometimes you need to manually add electron-builder as a dev dependency as well. I'h had to randomly (not sure what causes this one)

anyhow hope this helps anyone of the past, present and future as this is not an issue caused by the nx-electron plugin, it was introduced by angular themselves with version 17

[KaraboMolemane]

See comment: #247 (comment)

[briermay]

that has nothing to do with this, this is an issue caused by angular not NX or the plugin. Angular now puts the built files in a subfoler and that is why it can't find the files and why I posted my comment to this the first time.
look at the path:

Error: ENOENT: no such file or directory, open '/home/path/to/project/dist/apps/desktop-app-electron/index.js'

Angular no longer uses this path
the new path would be:
'/home/path/to/project/dist/apps/desktop-app-electron/web/index.js'

that's the reason I posted how to change the way angular builds, which removes the sub folder and fixes the issue. due to angular supporting SSR, it puts the web files in a sub folder now, and the builder is not looking in that sub folder and can't find the files

[o-glethorpe]

This is a plugin for a monorepo where the user can create its directory structure however he likes. How can the owner fixes a path like that?

[robsonos]

Just add the subfolder to loadURL:

App.mainWindow.loadURL(
  pathToFileURL(
    join(__dirname, '..', rendererAppName, 'browser', 'index.html')
  ).href
);

The above (plus what is mentioned on the notes) should fix the issue.