feat(desktop): electron integration

[JayKan]

@damnko,

Let's keep track all electron related integration questions here.

Please take a look at angular-seed-advanced (https://github.com/NathanWalker/angular-seed-advanced) project for electron integration. Basically, we can follow the advanced-seed project similarly for Desktop integration. Moving forward, we can also integrate Ionic2, NativeScript and etc.

[damnko]

Hey @JayKan do you think we could stick with webpack for these integrations or would you prefer to use gulp as in the angular-seed-advanced project?

[JayKan]

@damnko,

For demonstration and simplicity purpose, we can add additional gulp tasks to perform electron related build steps, and later we can migrate the gulp tasks to webpack. Let me know what you think.

[damnko]

I have limited experience with both of them so I can't really express myself. I would say that if you think that using webpack would be the best overall approach, I would follow that, but if you feel it's better to start off with gulp it's equally good for me :)

[JayKan]

@damnko,

What you can do first is to outline and understand what angular-seed-advanced does when running npm run start.desktop in development mode. Two things are happening when invokingnpm start.desktop:

1. gulp desktop: A gulp task that build src and dump to the proper dest place. (See `tools/tasks/project/desktop.build.ts)
2. NODE_ENV=development electron ./dist/dev: set NODE_ENV to development and use electron to build desktop app from ./dist/dev location.

Please take a close look at the build files from ./dist/dev after running npm run start.desktop, there is a file main.desktop.js which was compiled from main.desktop.ts for desktop app entry point, which we will have to add later additionally to start off our electron development.

So at a high level, angular-seed-advanced project uses gulp to build the proper src files and use electron to serve up the build files. Currently angular2-instagram uses webpack2 as a build tool and webpack-dev-server to serve up development files. Following angular-seed-advanced build steps, we can have webpack to build the proper files and have electron to serve.
With this said, we might have to refactor the webpack.config.js file. A good example to look at is: https://github.com/AngularClass/angular2-webpack-starter, within angular2-webpack-starter project, it uses webpack.config.js as an entry webpack config and based on the ENV, it delegates to proper webpack.config. Potentially, we can have webpack.prod, webpack.dev, and webpack.desktop files reside under a separate config folder.

Anyways, it doesn't really matter which build tools we should adopt whether its gulp or webpack, either build tool should work. I don't have that much experience in electron as well, maybe a good starting point is trying to build a small A2 project uses angular-cli and try to convert that in a desktop app using electron. Hopefully this can be helpful, but its always good to experiment diff technologies ;)

[damnko]

Thanks for the rich overview. Let me give it a try and let's see what I come up with.
I already did a sample angular CLI + Electron sample project yesterday (https://github.com/damnko/angular2-electron - nothing fancy there) but the only tricky thing was to create a working .AppImage for linux (the current system I'm running on).
With the references you gave me I'll try to achieve something using different webpack builds.
I'll keep you posted, thanks!

[damnko]

Hi again @JayKan. As far as you know when we pack electron for production we should ship it with express that ultimately renders the built index.html?
Using the standard win.loadURL('file://' + __dirname + /public/index.html') to load the index.html page directly doesn't seem to work.
Let me know what you think about it, thanks a lot!

[JayKan]

@damnko,

Yes you should init a new BrwoserWindow and uses .loadURL() method to load the index.html` instead of using express:

const url = require('url');
const path = require('path');

mainWindow.loadUrl(url.format({
  pathname: path.join(__dirname, 'index.html'),
  protocol: 'file:',
  slashes: true
}));

[damnko]

I am pretty sure I tried to run the built index.html just by double clicking it and I received an error. Are you able to run it without a server?

[JayKan]

Hmm I have not tried yet. But here is a good resource I've found that you can potentially mimic: https://github.com/auth0-blog/angular2-electron

The key thing is the electron directory under src file. Check it out that project, I was able to build and run locally!

[damnko]

Ok don't worry tomorrow I will do some other tests. I am not at the pc right now so I cannot share with you the details of the error I was getting but I think it was unique to this setup. I will keep you posted!

[JayKan]

For sure @damnko, keep me posted and good luck 👍

[damnko]

I think I will be able to send you a PR tomorrow or on Monday. Everything seems to work, I just need to clean things up and write some comments!

[probonopd]

the only tricky thing was to create a working .AppImage for linux

Which part was tricky about it? I am asking because we want to make AppImage as easy as possible - both for users and developers.

Here is an overview of projects that are already distributing upstream-provided, official AppImages. Many of the Electron-based projects use electron-builder which can generate AppImages natively (in fact, it is the default for Linux).

[damnko]

Hi @probonopd thanks for passing by! I think the issues I was having were only related to being the first time approaching Electron. In the latest PR I pushed I used electron-packager. How do you think it compares to electron-builder and why would you suggest one over the other?

[probonopd]

electron-builder can produce AppImages natively and automatically, while electron-packager can't, because "Adding AppImage support just doesn't make sense given the current architecture of Electron Packager".

[damnko]

Ok thanks for your suggestion, I will look into migrating to electron-builder next week. @JayKan what do you think?

[probonopd]

I stand corrected: As I learned today, one can use a combination of Electron Packager and electron-builder. Please see https://github.com/electron-userland/electron-builder#pack-only-in-a-distributable-format. Thanks @develar.

[JayKan]

Thanks a lot for dropping by and providing such valuable feedback on electron-builder @probonopd! We will definitely look into electron-builder for our next iteration!