About current features and abilities

[LouisSung]

Hi,

• According to the features mentioned in readme, nx-electron offered obfuscation, minimization, and packaging.
• After days of trial and error, I finally set up the Angular part and able to packaged them up
  1. I use nx build app --prod && nx build api --prod && nx build standalone--prod && nx run standalone:package to build a standalone executable. (ps: I use nx run standalone:make now)

     • Where the standalone is my <electron-app-name>

     • Is that the correct way? Since it's much harder than those mentioned in docs.
  2. I use ./dist/packages/standalone-linux-x64/standalone to run the app rather than nx serve standalone (ps: ./dist/executables/linux-unpacked/app)

     • With Ubuntu 18.04

     • Since the nx serve one seems like under the dev mode rather than the prod mode?
     • Requires combining with ng serve app and ng serve api (as issue #10 discussed)
  3. I haven't seen the ability or command to do obfuscation and minimization as mentioned in docs
     • Is these features still under development or just not well documented?
     • Or we have to do it during nx build app --prod manually so that Electron can get these pre-processed files?
     • I've traced some of your code but cannot find an implementation _(;3
  4. The most important question is that does this project offered the ability to run both APP and API in a single Electron production executable?
     • I can only find out discussion for NestJS (nestjs/nest#910) but seems there's no official support after then
     • Another interesting approach is jlongster/electron-with-server-example, but I haven't gave it a try yet

Actually, I'm new to NestJS, Nx, and Electron and not sure if these problems are solvable _(;3 Thank you for building this project and reading these questions : )

[bennymeg]

Hi, Louis, Thank you for your questions, I will try to answer them below:

i) I am not sure why you have 3 project there, is the api not part of the electron app (i.e. nestJS app)? if so, that is correct. keep in mind that build you project only required when you ready to package you project, otherwise, serving you project is the way to go (more info below).

ii) Correct, in development you serve you app locally (frontend and backend), it allows you (along other things) continues builds while you update you code. You can use package / make once you ready to test your app in production.

iii) Yes, It is implemented, you just have to pass --obfuscate to you command. I recommend using nx-console for vs-code, it will show you all the options in a nice graphical ui (be aware, currently they have a bug when invoking a production command).

iv) Yes! If you will updatenx-electron to the latest beta you will find a make command. It will allow you package your project into a single executable (along other cool features).

Best, Benny.

[LouisSung]

:o Thanks for your quick reply!!

1. OK~
   • I use the Angular-Nest archit. provided by Nx, which create app and api as projects separately
2. I’m not sure the difference between make and package :p
   • I run both and at least package one works
     • The binary file generated by package can only be executed via terminal
     • While the make one generate a clickable execution but with blank window. I’ll give it a try a few hours later :)
3. :o that’s cool! I’m using WebStorm, that’s why I didn’t get the command hints support. I’ll try it too.
4. I’m using the latest @9.0.0-beta1, but not knowing the difference between the make and package

---

• Althought I’m still surveying how Nx and NestJS work, it might be a good chance to ask the detail technique here :)
  • That is, Nx and your project both use the proxy so that Angular can route the requests to API server.
  • For the dev-mode, Angular binds to port 4200 and NestJS uses port 3000 (3333 by Nx default though)
  • But how does the Electron make connections between APP and API in the single executable?
    • Does it still require the 3000 port for Nest (since Angular is served by Electron statically)
    • If so, how come if the port 3000 is used by the other process? (e.g., unable to open, no api response, required manually env variable set up?
    • If not, is it using the inter process communication approach?

Thanks a lot!!

[bennymeg]

• Electron can be divided into two part: main process and renderer process:
  • main process - holds the code that handles electron backend process
  • renderer proccess - holds the code that handles electron frontend process (the UI)
• Nest is an backend for the application itself, it should not be packaged inside the electron app
  • electron only talks to the renderer process (in you case angular), angular talks to the api (in you case nest)
  • you do not have to use proxy in order to send messages between angular and nest
• There are to ways to create a distributable:
  • packaging - this procedure will create an intermediate package that can be processed into an executable for the various platforms.
  • making - this procedure will create a single executable for your chosen platform (i.e. you can make an appx so you can publish your app in windows store or a mas file forthe mac app store). You can also sign your app, contain the app inside an asar, etc..

I hope that answer you questions, Benny.

[LouisSung]

• Yeah, I’d read some info about main and renderer processes and their relationship (the interesting tutorial)

• Nest is an backend for the application itself, it should not be packaged inside the electron app

  • Is that still possible to package application api in Electron and run it so that user can run everything totally in the localhost using single executable? Or user must deploy another API server manually without integrated into Electron?
  • Did I misunderstand what backend mean in the doc? (Packaging: Packages your frontend and backend webpack bundles)
  • I used to think both Angular and NestJS can be built and packaged into an Electron app, while Angular part is served as static files with rendering (like Nginx+Chrome) and NestJS part is served as normal Node.js application

[bennymeg]

• Is that still possible to package application api in Electron and run it so that user can run everything totally in the localhost using single executable? Or user must deploy another API server manually without integrated into Electron?

Well, I assume you can build you api , copy the compiled output into your main process app (or by adding the api dist folder to the maker config file), and initialize the server when the app is initialized.

• Did I misunderstand what backend mean in the doc? (Packaging: Packages your frontend and backend webpack bundles)

In the docs, when I say 'backend' I mean the main process of electron. I think electron application are unique at that matter.

• I used to think both Angular and NestJS can be built and packaged into an Electron app, while Angular part is served as static files with rendering (like Nginx+Chrome) and NestJS part is served as normal Node.js application

I think that is possible, but you will have to experiment it as i explained in the first bullet, I didn't though that is a needed feature. I would be happy to learn more about it if you have some material about that topic.

[LouisSung]

• Actually I find out the explanation for backend over here a moment ago :p

• Although there are lots of security issues to solve and prevent, it might still be useful if the API server can be integrated into Electron executable (at least for our purpose)

  • I'll try to use the approach mentioned in first post and give some examples or tutorials if succeed

---

• Another problem I met was that make didn't have as many configurable options as packaged, is that normal because make is still under development?
  • For example, there are no options like ignoreSourceMap, prune, etc. at least in the JSON schema (make vs package)
  • WebStorm warn Property 'xxx' is not allowed if the "$schema": "../../../../../node_modules/nx-electron/src/validation/maker.schema.json" is set.
  • Also, I set "asar": true in maker.options.json and nothing happens, while the packager.options.json work fine. Is that a bug?

[bennymeg]

• I'll try to use the approach mentioned in first post and give some examples or tutorials if succeed

Great, keep me posted if you succeed.

• Another problem I met was that make didn't have as many configurable options as packaged, is that normal because make is still under development?

  • For example, there are no options like ignoreSourceMap, prune, etc. at least in the JSON schema (make vs package)

By default, make ignore source map files and prune you node modules, it also handles rebuilding native modules for electron.

• WebStorm warn Property 'xxx' is not allowed if the "$schema": "../../../../../node_modules/nx-electron/src/validation/maker.schema.json" is set.

I have configured a schema that validates the options file so only valid options will be used.

• Also, I set "asar": true in maker.options.json and nothing happens, while the packager.options.json work fine. Is that a bug?

All the setting that you see in nx-console override the setting you set in the config file. if you use the GUI you can either check asar, if not you can use the --asar option and let me know.

[bennymeg]

I will close this issue for now, feel free to continue the conversation. Good look.

[LouisSung]

Hi, I'm here to update status.

It's able to fork a NodeJS process and use it to run NestJS as API server as of now. However, there are 2 problems required to solve

1. (Critical) Is there any ways I can force electron-builder to bundle specify package into the exectuable?

   • I got Error: Cannot find module 'tslib' when I try to use async/await function in Electron
   • I try to solved this problem (e.g., install electron@8.2.0, use two-package-structure, and set externalDependencies) but just not work
   • I wonder if there's ways to force electron put tslib into executable (is npmArgs responsible for this?)

2. Using IPC (e.g., Unix Domain Socket) is much safer than bind to localhost port. I'm not sure if NestJS can bind to socket rather than port and have to give it a try.

---

• Able to bootstrap API server and bind to localhost before initMainWindow, so that angular can send request and get response.

[bennymeg]

Hi, good progress.

1. You can try moving tslib to the dependencies block.
2. You can use socket.io websocket in conjunction with nestjs

What does the project structure look like?

• I think you should try adding nestjs to you electron project (combining you electron backend and your api backend).

[LouisSung]

Hi,

Here's my code @https://github.com/LouisSung/tmp-nx

• Steps (on Ubuntu 18.04)

  • yarn install > yarn ls:build:all > yarn ls:prod:standalone should work
  • ... > yarn ls:prod:exe should failed (will explain later)

• Some critical implementation

  1. Start API server
  2. Put api files to electron using extraResources (it won't be packed into asar... and I cannot find out how)
  3. Comment out the async function, and the yarn ls:prod:standalone will failed
  4. I've already put tslib in package.json and apps/standalone/package.json

---

• As I mentioned above, I've faced 2 kinds of tslib not found error. I think they are different but both required tslib??
  • yarn ls:prod:exe failed for both 2 situations :(
  • This is the one where yarn ls:prod:exe failed but yarn ls:prod:standalone works fine (without comment out async)
  • This is the other, where yarn ls:prod:standalone failed when comment out async

---

BTW, I'm facing another issue is that I can get random port and apply it to NestJS easily, but haven't found any way set up Angular. So I just hard code it now.

• Sorry for not familiar with Electron & Angular _(;3, I've also tried IPC but didn't succeed

---

I'd like to!! But I think I haven't done it right yet QQ

• I think you should try adding nestjs to you electron project (combining you electron backend and your api backend).

• Do you mean only 2 workspaces Angular & Nest + Electron? :o
  • Because what I want to do is to design a flexible framework rather than stick to one (say Electron or Docker)
  • My plan is to totally separate Angular, NestJS, and Electron as 3 different workspaces
  • So that I can make 3 Docker images (i.e., Angular, NestJS and Angular+NestJS)
  • And 1 executable (i.e., Angular+NestJS > Electron)