Electron-builder: How to specify which files you want to bundle?

[daviddelusenet]

• Version: 19.52.1

• Target: Mac

I'm building an application using React and SASS. In this application I'm also using ES6/ES7 features. To compile all of my code to distribution ready code I'm using Webpack in combination with Babel.

Now I'm trying to use electron-builder to package my Electron app. This works, but when opening the application I get the following error:

I know this is because Electron can't handle ES6/ES7 which is fine. That's why I'm using Babel to compile to ES5. Electron-builder isn't using these compiles assets tho.

These are the contents of my package.json (I've removed the unnecessary stuff):

{
  "main": "src/index.js",
  "build": {
    "appId": "your.id",
    "mac": {
      "category": "your.app.category.type"
    }
  },
  "scripts": {
    "start": "npm run build:dev",
    "start:electron": "./node_modules/.bin/electron src/electron.js",
    "build:dev": "BABEL_ENV=dev node_modules/.bin/webpack-dev-server --env=dev",
    "build:prod": "BABEL_ENV=prod node_modules/.bin/webpack --env=prod",
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "devDependencies": {
  },
  "dependencies": {
  }
}

So my question is: it is possible to bundle compiled assets? I've the index.html, app.min.js and app.min.css files in my dist folder. How do I specify that I want to use these files for my Electron app?

If you need any more information don't hesitate to ask. Thanks!

[daviddelusenet]

This was actually quite easy to solve:

"main": "src/electron.js",
"build": {
  "appId": "your.id",
  "mac": {
    "category": "public.app-category.video"
  },
  "files": [
    "src/electron.js",
    "dist/index.html",
    "dist/app.min.js",
    "dist/app.min.css"
  ]
}

Closing this issue.

[manodupont]

Hi, i would like to know if you succeeded into packaging your Electron app! ?
I am tryind to do the samething but it just doesnt work. I always end up with Electron error : webpackJsonp not found. But its included in my bundled.js file. So i am wondering how you did this ?

[daviddelusenet]

@manodupont did you check out this issue: https://github.com/webpack/webpack/issues/368 ?

[manodupont]

Well. I dont know. Its working fine for me. In production and in dev and any other envs :). I mean, its been running for 2 years now.

Just confused if you had webpack bundle.js ? And if you managed to package an electron app finally ?

[daviddelusenet]

Yes, you can see my solution above. I just build my files (which you would normally use on your server where you website is hosted).

Then I just added the following part to my package.json:

"main": "src/electron.js",
"build": {
  "appId": "your.id",
  "mac": {
    "category": "public.app-category.video"
  },
  "files": [
    "src/electron.js",
    "dist/index.html",
    "dist/app.min.js",
    "dist/app.min.css"
  ]
}

Don't forget: since you're using webpackJsonp on production it needs to be installed as a depencency and not a devDependency. It won't work if webpackJsonp is installed as a devDependency.

[ishandutta2007]

This is how my root directory structure:
THe *.py files are not loading

index.html
styles.css
main.js
package.json
dist/
node_modules/
renderer.js
visitor.py
download.py