Integrate an external directory with Electron-Builder

Currently, I am working on developing multiple electron apps and have a designated directory for storing common images and files. My goal is to include these common resources in each app during the electron-builder build process. According to the documentation, it is recommended to specify the path to the common files under the build > files key. However, despite configuring the build settings as shown below, I am facing issues:

"build":{
    "files": [
        "**/*",
        "../common/img/*"
    ]
}

Here is the outline of my directory structure:

|git_folder
|-- electronapp1
|---- package.json
|-- electronapp2
|---- package.json
|-- common
|---- img
|---- js
|---- css

While accessing the common directories, I utilize HTML code like this: 

<link rel="stylesheet" href="../common/css/master.css">
. This method works perfectly fine when running the apps with electron . for debugging purposes. However, when I build the apps using electron-builder, it seems to omit the common directories, resulting in "File not found" errors in the console.

javascriptnpmelectronelectron-builder

Answer №1

In your current setup,

"extraResources": [
    {
        "from": "../common",
        "to": "common"
    }
],
"files": [
  "**/*"
],

If I were in your shoes, I would recommend configuring it like this:

const path = require("path");
const appPath = __dirname;
const appResourcePath = path.join(appPath, "..", "common")

module.exports = {
  appPath,
  appResourcePath
};

After doing this, you can reference the appResourcePath variable in your renderer code like so:

<img src=path.join(appResourcePath, 'img', 'background.png')>

By following these steps, your code should work flawlessly in any environment.

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

Angular: Assigning a key from one variable to a value in another

I am currently facing a challenge with rendering a form on a page using ng-repeat, where the data for this form is dynamically fetched from a request. Within this data, there is a nested array called "categories" which contains IDs. I want to display the n ...

javascriptangularjsarrays

Selecting a Child Component in Vue.js: A Guide to Specifying the Correct Component

Within my application, I have a variety of components that are either generic or specific to certain brands. For example, I have two brand-specific components named Product_brand_A.vue and Product_brand_B.vue, both of which I want to display in a list form ...

javascriptvue.jsvuejs2vue-componentinversion-of-control

Utilize Moment to round a date either up or down

I am using Moment to compare two datetime values. Specifically, I am utilizing Moment.isSameOrBefore function. However, my two date values are slightly different due to milliseconds. I want these two values to be considered the same: var date1 = ' ...

javascriptdatetimemomentjs

Exploring a personalized approach to searching in DataTables

I am facing a dilemma with implementing a custom search in a DataTables table due to my limited experience with JavaScript. The function I have only triggers on startup and not when typing in the search box. If you're interested, you can find my orig ...

javascriptjquerydatatables

Conceal Profile Field When User Metadata is Empty - WordPress

Hey everyone, hope you're all having a great evening! I'm looking to hide a profile field when the user meta is empty. For instance, in the image provided, I want to conceal the billing_ateco row because the billing_ateco field is blank. https ...

javascriptwordpress

How can I resolve the issue of using string values for items inside v-autocomplete, but needing them to be numbers in v-model?

I am working with a v-autocomplete component <v-autocomplete v-model="addressRegion" :items="selectLists.regions" item-value="key" item-text="value" ></v-autocomplete> The AddressRegion is curren ...

javascriptvue.jsvuetify.js

Why isn't my watch function functioning properly within Vue?

In my JS file, I have two components. The file starts with this line: const EventBus = new Vue(); I am trying to pass two strings, 'username' and 'password', from the first component to the second component, but it's not working. ...

javascriptvue.jsvue-component

Expanding a dropdown list on the fly using vanilla JavaScript

I am restricted to using Vanilla JavaScript only, without any additional libraries like jQuery. Initially, I attempted to store all registered items in a global array and then use a forEach loop to append an <option> child to the <select>. How ...

javascripthtml

Bringing in an Angular2 project to the Phoenix framework

Currently juggling two interconnected projects - a Phoenix based website and API, along with an Angular2 application utilizing the API from Phoenix. My goal is now to integrate the Angular2 application into the Phoenix project, but I'm unsure of the b ...

node.jsnpmintegrationangularphoenix-framework

Reveal each element individually upon clicking the button

I am trying to display 5 div elements one by one when clicking a button, but the current code is not working. I am open to alternative solutions for achieving this. Additionally, I want to change the display property from none to flex in my div element. ...

javascripthtml

Tips on obtaining outcome by invoking a route outside of app.js

Within my file containing the request methods, the structure appears as follows: article.js router .route("/") .all((req, res) => { console.log("this should happen for any call to the article route"); }) .get((req, res) = ...

javascriptnode.jsexpressroutes

Experience the classic game of rock-paper-scissors brought to life through JavaScript and HTML,

I've been working on a rock, paper, scissors game in JavaScript and I'm struggling to get the wins and losses to register correctly. The game keeps resulting in a draw even though I've checked my code multiple times. It's frustrating be ...

javascripthtml

utilizing the entire string rather than just a portion

I was attempting to create a JavaScript jQuery program that vocalizes numbers based on some previously saved data. However, I encountered an issue where only the last number in the sequence was being played (the final character in the string). Below is t ...

javascriptjqueryhtml

Tips for activating just a single event, whether it's 'change' or 'click'

I am facing an issue with a number input tag that has two event listeners 'on-click' and 'on-change'. Whenever I click on the arrow, both event listeners get triggered. I want only one event to trigger first without removing any of the ...

javascripthtmlvue.jsevent-handling

I require assistance in troubleshooting and repairing my HTML and JavaScript code

I am working on creating a feature where users can input their upcoming birthday date and receive an alert showing how many days are left until then. However, I encountered an issue where the alert displays NaN (Not a Number) before the birthday is entered ...

javascripthtml

How can a loading indicator be displayed while retrieving data from the database using a prop in a tabulator?

Incorporating a tabulator component into my vue app, I have set up the Tabulator options data and columns to be passed via props like this: // parent component <template> <div> <Tabulator :table-data="materialsData" :ta ...

javascriptvue.jstabulator

All the details from this run are available in the npm run dev log on Ubuntu

Good day! I've been working on deploying a page built in vue.js, and after uploading all the files successfully, I encountered an issue when trying to run "npm run dev." No matter what I try, including re-installing npm dependencies and starting from ...

javascriptvue.jsubuntunpmdeployment

Incrementing numbers automatically within a JSON object while iterating through a for loop

I am struggling to figure out how to append the var i to the left side of the object declaration. This error is causing me troubles. Any assistance in resolving this issue would be greatly appreciated. If you have any alternative solutions, I am open to e ...

javascriptjqueryjsonloops

What is the correct way to import React's experimental hooks?

I am eager to explore the cutting-edge and unreleased features of React, particularly the "useEffectEvent" hook. However, I have encountered a problem while trying to import this specific feature from the React package. Whenever I attempt to import somet ...

reactjsnpm

Stop all child components in React from mounting when the page loads

I am currently working on a single-page React application where I need to mount specific components at different times. However, all the components are loading simultaneously instead of one at a time. In my research on StackOverflow, I came across solutio ...

javascriptreactjsecmascript-6componentssingle-page-application