Adding supplementary documents within the app.asar file via electron

This is a Vue application using electron-builder.

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.3.2",
    "vuetify": "^2.2.33"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-typescript": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "electron": "^6.1.12",
    "typescript": "^3.9.5",
    "vue-cli-plugin-electron-builder": "~1.4.6",
    "vue-cli-plugin-vuetify": "~2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  }
}

When running npm run electron:build, the structure generated looks like this:

https://i.stack.imgur.com/N5rL7.png

The contents of app.asar can be viewed here:

https://i.stack.imgur.com/IcDFz.png

The background.js file includes all the dependencies. However, there are external modules (from node_modules) that read files using fs.readFile(__dirpath + '/file'). Since these files are not included in the generated bundle, they need to be added manually.

An attempt was made to include these files in vue.config.js:

module.exports = {
  lintOnSave: true,
  transpileDependencies: [
    'vuetify'
  ],
  configureWebpack: {
    devtool: 'source-map'
  },
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraFiles: [
          'node_modules/module/file'
        ]
      }
    }
  }
}

However, the file is still placed outside the app.asar, even with the use of extraResources. As a result, fs.readFile(__dirpath + '/file') cannot locate the file.

How can I successfully include files inside app.asar?

javascriptvue.jselectron

Answer №1

After much trial and error, I discovered that the most effective method is to utilize the public directory. Any file located within the public/ folder will automatically be included in the app.asar.

In my case, the file I needed to include was part of an external library. In order to prevent it from becoming a permanent fixture in my project, I utilized gitignore to exclude it. Instead, I employed npm scripts to copy the necessary file just before building the project.

"scripts": {
    "build": "cp node_modules/lib/file public && vue-cli-service electron:build -wl",
    "serve": "mkdir -p dist_electron && cp node_modules/lib/file dist_electron && vue-cli-service electron:serve"
  }

Answer №2

I discovered that in order for the files to work properly, they need to have a relative path from the dist_electron/bundled directory (or potentially another directory). For example, if we have a directory called keys in the root, the configuration should look something like this:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {
        files: [
          "**/*",
          {
            from: "../../keys",
            to: "./keys",
            filter: ["**/*"],
          },
        ],
      },
    },
  },
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alternate the color over time using CSS

Is there a way to dynamically change the color of a div from black to white every two seconds, and then from white to black, continuously toggling as long as the div is visible? Essentially, I want the div to only be displayed when a user clicks and drag ...

javascriptjqueryhtmlcsscolors

Angular - Issue with setting default value in a reusable FormGroup select component

My Angular reusable select component allows for the input of formControlName. This input is then used to render the select component, and the options are passed as child components and rendered inside <ng-content>. select.component.ts import {Compon ...

javascriptangular

What is the best location for the frontend server code within an application built using create-react-app?

After using create-react-app to create my app, I am looking to log messages in the server console. Any advice on how to achieve this? I attempted adding index.js to the root folder and creating a server folder, but so far it hasn't been successful. ...

javascriptnode.jsreactjscreate-react-app

When switching back to the parent window and attempting to execute an action, a JavaScript error is encountered

Currently automating a SnapDeal eCommerce website A challenge I am facing is an error message in the console: The issue occurs when transitioning from a child window back to the parent window and performing operations on the parent window. //Automa ...

javascriptselenium

Retrieving external JSON data with JavaScript

I am attempting to utilize a specific service for proxy checking. They offer an uncomplicated API that delivers JSON data. My goal is to retrieve this JSON on my own server. Despite various attempts, I consistently encounter either a CORS request issue or ...

javascriptjsoncorsjsonp

The "npm start" command encountered an issue: script "start" is

I'm encountering an issue when attempting to run my node application using the npm start command in Visual Studio Code. Any assistance would be greatly appreciated! Here is the content of my package.json file: { "name": "bloggin-site ...

javascriptnode.jsnpm

What could be the reason for the malfunction of this AngularJS data binding feature?

I am trying to create an angularjs filter that outputs HTML, similar to what is discussed in the link, but I am encountering issues. In my HTML code, I have: <ul> <li ng-repeat="book in books | filter:query"> {{book.title}} ...

javascriptangularjstemplating

Is it accurate that JavascriptResult displays javascript on the page in a string format?

I am new to .NET MVC and have been experimenting with different return types in MVC. However, I am having trouble getting the JavaScriptResult to work. In my controller, I have the following code: public ActionResult DoSomething() { string s = ...

javascriptasp.net-mvcrazor

The console is throwing an error because the store variable in the template is only filled after making an asynchronous API call

Within my component, I am showcasing various properties (exemplifying two below) of the selectedPlan store variable after receiving its value from the store: <div> {{ selectedPlan.periodTitle }} </div> <div> {{ selectedPlan.currency } ...

vue.jsvuex

Attempting to retrieve key-value pairs from a nested JSON array

I am attempting to extract values along with their corresponding key names from a nested JSON array resData =[ { _index: 'web', _type: 'event', _id: 'web+0+93', _score: null, _source: { 'os-nam ...

javascriptnode.jsarraysjson

Is it possible to update labels on an AngularJS slider using a timeout function?

I recently started implementing an AngularJS slider to navigate through various date and time points. Specifically, I am utilizing the draggable range feature demonstrated in this example - https://jsfiddle.net/ValentinH/954eve2L/ The backend provides the ...

javascriptangularjsslider

Transforming the API response

After making an Ajax call, the response received is: console.log(data); {"valid":true,"when":"Today"} Attempting to read the response like this: var res = data.valid; console.log(res); results in 'undefined' being displayed. To address this i ...

javascriptjqueryajax

Issues arise with the functionality of Zurb Foundation 5 tabs

Utilizing the tabs feature in ZURB Foundation 5, I've noticed that clicking on a tab changes the hash in the URL. However, I actually want to prevent this behavior as I rely on the hash for managing page loads. Although I attempted to use preventDef ...

javascriptjqueryhtmlcsszurb-foundation-5

Utilize JavaScript to trigger a div pop-up directly beneath the input field

Here is the input box code: <input type='text' size='2' name='action_qty' onmouseup='showHideChangePopUp()'> Along with the pop-up div code: <div id='div_change_qty' name='div_change_qty&ap ...

javascriptjqueryhtmlcss

Achieve accurate mouseover interaction in a ThreeJS VueJS application by dynamically altering the viewport

I managed to accomplish an amazing feat: I designed a menu consisting of 4 unique shapes. As you hover over each shape, it undergoes a color change, grows in size, and shifts the other shapes while slowing down its rotation. To achieve this, I delved into ...

vue.jsthree.jsresponsive

Retrieve the value of a dropdown menu that contains multiple selections associated with a single model

My current code generates a calendar entry listing for the courtroom, with each case having a "status" dropdown that is set by the judge post-hearing. I now need to save this data in the database. I have successfully added ng-change which triggers the desi ...

javascriptangularjs

Display a modal as the first screen appears in a React Native application

Trying to implement a non-animating modal before the main screen loads on my react-native app. The goal is to display a login screen in a modal view if no user is logged in. Encountering an issue where the main screen briefly appears before the modal, ins ...

javascriptreactjsreact-native

Enable users to modify the URL in the window.open() function

In the code snippet below, a new window opens when a user clicks on a button: $('.loginButton').click(function () { var strString = $("#medlineSearch").val() var strSearch = "http://google.com&query="; var url = strSearch + strSt ...

javascriptjqueryhtml

Endless Loop Issue with Google Maps API Integration in NextJS-React

Currently struggling to troubleshoot an infinite loop issue in my React function component map. I've spent a considerable amount of time analyzing the code and suspect that it might be related to the useEffects, but I'm unable to resolve it. Atta ...

javascriptreactjsnext.js

Tips on choosing JSON data to show on an HTML page

I am working with JSON data from a specific URL and I need to display only the information related to France on an HTML page. However, I am unsure of how to achieve this. Can someone please assist me? Here is my JavaScript code: // API Fetch Call const ...

javascripthtmljsonapi