Add package process

[fabien0102]

Hi!

First, thanks for this cool starter, electron + fusebox is just blazing fast and it produce a very good dx 😍

For a complete electron starter, we need to add the package process! (essential for an electron app)

I'm trying to do this process on my current project (private repo, sorry) but it's not really easy to deal with main.ts/app.tsx/vendors and all assets (icons, images…) to have the perfect bundle!

So if someone have already do this job before, it can be very cool to consolidate this really good starter 😄 (otherwise, I will probably considate this myself, when my stack will working)

Note: I think https://github.com/electron-userland/electron-builder can do the job, but it's just a suggestion

[tomitrescak]

Guys, it would be really cool to show how can one package this. It seems that target: 'electron' does not work properly and largely behaves like target: 'browser'. For example it packages fake crypto, fake fs, path and others. Also, when 'electron' is packaged into vendor module it seizes to work ;(

[tomitrescak]

A bit more detail. I could get basic packaging to work, but the moment I tried using electron code in my app it crashes.

Example:

const electron = require('electron');

var db = new DataStore({
    filename: path.join(electron.app.getPath('userData'), 'data.db'),
    autoload: true
});

const userDataPath = (electron.app || electron.remote.app).getPath('userData');

[EDITED]

Please note that I have to package vendor.js as "target:server" not "target:electron"

[nchanged]

Any idea why?

[kfiku]

Hi @tomitrescak, where you test it? From ./src dir (Renderer process) or in our electron.js (Main process)?
Do you try the saim think with pure electron-quick-start?

[tomitrescak]

It seems that target:electron is misbehaving and adding browser versions of packages (the ones from modules directory)

My test was following:

I have copied a blank Electron.app to build directory, copied electron.app. Then I have pointed the fuse output to Electron.app/MacOS/content/resources/app. I have also set up vendor bundle to copy to the same directory.

[kfiku]

I try you example and it seam to work:

• i clone this repo
• npm install (on latest node 6.11.2)
• i add your example in the end of file ./src/index.ts

const electron = require('electron');
const userDataPath = (electron.app || electron.remote.app).getPath('userData');
console.log(userDataPath);

and its works (logs to console right location) in both envs:

• npm start (dev env)
• npm run prod (prod env from dist dir)

[tomitrescak]

Yes, that this DOES work, but it will stop to work once you package vendor.js.

So, try to package vendor.js to your Electron.app and you'll see what I'm talking about.

Currently the only way to make it work is to 'npm install' also inside the Electron.app folder which is a bit cumbersome since the whole point of packagers is to package it into few files.

[tomitrescak]

I am beginner in this whole electron business so maybe I am not doing something right. So maybe instead of trying to explain my setup (that may be very wrong), is there any guide on how can I package my electron app into Mac.app with fusebox packager? Or even with using asar?

I tried webpack setups, but: once you go Fuse, Webpack's old news. Webpack setups are HUGE and SLOW and COMPLEX and Typescript is its enemy. I love the simplicity and SPEED of fuesbox. Most webpack boilerplates were hot reloading in 2-3 seconds ... go figure how much it takes Fusebox. I would love to solve this one.

[kfiku]

I have try to get it build right on my repo: https://github.com/kfiku/piGit with ubuntu linux.
Now Im working to make it easy and more user friendly. Other thing it to make it work on other os'es.

I think base version will be done next week

[tomitrescak]

OK, will wait for any update. I'll play with the setup myself/

Meanwhile, @nchanged would you have any idea why "target: electron" is using shimmed modules and not original ones? For example, bcrypt is shimmed, fs .... pretty much everything.

[nchanged]

@tomitrescak I think you need to use target : "server"

[kfiku]

@tomitrescak What you mean "is shimmed"? Some features are missing? Works differently? Can you give some examples so i can test it?

[kfiku]

@tomitrescak i make pull request with all package stuff here: #6, you can check it it works for you

[tomitrescak]

Looks great! I'll play with it ASAP. Good job ;)