How to get Electron-builder to package non-code files for the installer to install them in the user home directory (app-data)

Question

What I want to accomplish:

I want to understand how to configure Electron-Builder/Webpack to package non-code files (configuration files, XML files, meta-data files, JSON files) such that when the installer installs the application these files will get saved in the users home directory on the local machine. I get the importance of storing these files outside of the installed binary files, so when the user updates their version they do not loose any customizations they may have setup. But the initial version of these files must exist some place to begin with, like a template version of these files.

I've found a few tutorials that explain how to include these non-code files as part of the package: Electron - How to add external files?

How to manage configuration for Webpack/Electron app?

But what I do not see or understand from these posts is how to configure the installer so that when it runs, these files will get copied to the users home directory (appData folder). In particular if those files are already installed to avoid over-writing them or ask the user if they want to over-write them? How does one set that up?

Also there must be some configuration setting to allow these files to remain part of the Github repo and enable developers to use the dev-path to these non-code files, while not breaking the production path to these files on the users installed version. How does one setup that kind of a configuration?

This is the folder structure on my project:

src
 - Application
    - electronVueJS-App
       - application.js
       - App.vue
       - build.js
       - registerServiceWorker.js
       - ...Rest of the files/folders for the application....
       - Resources
          - Configuration
             - Colors.csv
             - Configuration.xml
 - Framework
    - CommandsBlob
       - commands.xml
    - Workflows
       - workflows.xml
    - ....Rest of my code files/folders....

I suppose step 1 would probably for me to move all of my non-code XML files into at minimum 2 folders, one in the Application folder and the other in the Framework folder, and I am prepared to do that, but I would like to get a big picture of how all of these Electron-Builder/WebPack/Installer configurations are setup such that the configuration files will be installed in the users Home Directory path on their local system before I get too far into re-structuring my application code.

I guess there are other concerns as well, but I suppose I can try to figure these out separately and if I hit another blocker then submit another question. But if you have links that could help me then please, by all means share.

After setting up an auto-updater, how to tell the user if a particular update requires breaking changes to their configuration file(s).

How to setup the un-installer so that there is an option for the user to leave configuration file(s) intact after the uninstall process, or to proceed with removing everything?

My repo: https://github.com/SethEden/electronVueJS-App/

Thank you for your help!!

UPDATE:

I've cleared out the code base for the above repo and went back to a very basic configuration to try and get this working. I discovered that NSIS is the tool for building Windows installers for Electron applications. I'm trying to follow this tutorial:

https://youtu.be/QowWa3aVCQw

When I tried to add the NSIS build target to my package.json I got an error from the Electron-Builder that was relating to VueJS and told me to move my build into the Vue.config.js file.

So I did this and now I'm getting this error:

(node:16532) UnhandledPromiseRejectionWarning:
Error: cannot find specified resource "LICENSE",
nor relative to "C:\electronVueJS-App\build",
neither relative to project dir ("C:\electronVueJS-App")

I even tried to remove the license completely from the build definition in my vue.config.js file, but now my NSIS installer doesn't have a license. Also, and more importantly, if I cannot even specify a NSIS license file in my build configuration how in the holy heck am I going to be able to specify adding non-code files to my build? And more importantly how would I tell NSIS to install them in the users AppData folder on their local installed system path?

Can someone please help me figure this out? I've gotten quite discouraged over getting stuck on this issue.

Thank you & Cheers ~Seth

Answer 1

Let say you have a user.config file in the src directory and you want to place it in the APPDATA directory.

1. First of all you need to package this file. It can be done as follows:

   "build": {
       "extraFiles": [
         {
          "from": "./src/user.config",
          "to": "."
         }
       ]
    }
   

   This will place the user.config file in the root directory of packaged source.

2. Now we need to tell the installer to place this file in the APPDATA directory. For that we need to write a custom nsis script. You can place this script in the build folder.

   "build": {
         "extraFiles": [
            {
               "from": "./src/user.config",
               "to": "."
            }
          ]
    },
    "nsis": {
         "include": "build/installer.nsh"
    }
   

   The contents of installer.nsh should look something like this:

   !macro customInstall
     CreateDirectory $LOCALAPPDATA\*(YOUR_APP_NAME)*
     CopyFiles $INSTDIR\user.config $LOCALAPPDATA\*(YOUR_APP_NAME)*
     Delete $INSTDIR\user.config
   !macroend
   

   Read more about this here

Additionally, in order to get the APPDATA path in your source files you can get it like this:

process.env.LOCALAPPDATA