Search code examples
electronfselectron-builder

Electron builder and asset files

I have an issue building for distribution an electron app, on macOS.

I have some folders that are in the root dir of my project, next to my index.js, which I need to be included in my packaged app.

After trying by hardcoding each and every file inside of package.json, which didn't help, I ended up with the following block

    "extraResources": [
      {
        "from": "files/",
        "to": "files/",
        "filter": [
          "**/*"
        ]
      },
      {
        "from": "assets/",
        "to": "assets/",
        "filter": [
          "**/*"
        ]
      },
      {
        "from": "accounts/",
        "to": "accounts/",
        "filter": [
          "**/*"
        ]
      }
    ]

If I run the .app it appears that the files are not there. Opening the Contents/Resources, I see they are there, so, toying around I discovered that the app is looking inside the app.asar container, where obviously the files are not.

I found a small hack by adding a couple of '..' in front of all my paths, so it goes outside the app.asar container but I really think this is a bit idiotic to be the solution to my issue.

Plus, I plan to build this for multiple platforms and I have a feeling that if I go through with this hacky way of fixing it, I'll have to create a hack for each platform, which I'd rather not do...

Solution

  • if you have files that you are using in the html (in my example assets/css etc.), or requiring in any file and have a folder structure like this, the folders would be automaticly in the asar.

    Note: asar is read only package, you cant add, remove or edit files after creating this file.
    enter image description here

    the using of the css files in the assets/css folder is simple: enter image description here use the relative path from your html file and it would work on all plattforms.

    if you have files that are not related to your project, or not used in your project but should be available in the packaged app:

    you must use "extraFiles" in your package.json extraFiles would copy the files to the app content directory on Mac OS, on Windows and Linux it will copy it to the app root directory. If you use extraResources it will copy the files to Contents/Resources on Mac and on Windows it will copy the files to resources Folder.

    "extraFiles": [
  "files",
  "assets",
  "accounts"
]

    note: empty folders would not be copied

    in your app use something like this module to get the root path of your app, and use your files with this path

    alternative: use process.execPath and replace your executable name to get the correct path

    based on your comment:
    if you must load this files (css/js) in your app html, you can load dynamicly on the onload event with the solution i provided you above.