The Electron NPM program is unable to locate the file:///eel.js, yet Python has no trouble locating it

I am currently developing a desktop application utilizing Python, JavaScript, HTML, and CSS. To connect Python to my application, I am using eel. Interestingly, everything works perfectly when I launch the desktop application through the Python terminal.

However, the issue arises when I try to launch the app through Electron via the command line:

$npm start

Although the desktop application loads up, it fails to execute any of the Python backend code. This is evident from the error displayed in the inspector:

Failed to load resource: net::ERR_FILE_NOT_FOUND eel.js:1

I have been troubleshooting for the past 8 hours but haven't been able to pinpoint the exact cause of this problem.

I understand that you might need more details to assist me effectively. I have already checked various factors such as the file structure (with __.py outside the web folder) and inserting 

<script type="text/javascript" src="/eel.js"></script>
. Therefore, please specify what specific information you require in the comments below. I will update this question with any additional relevant details alongside the final solution for the benefit of others facing similar issues in the future.

javascriptnpmelectronelectron-buildereel

Answer №1

Don't shy away from npm. eel.js functions as a virtual JavaScript, so there's no need to avoid it. Include the following in your main Python file:

import eel.browsers

Assign your electron browser like this:

eel.browsers.set_path('electron', 'node_modules/electron/dist/electron')

Then start using it with:

eel.start('main.html', mode='electron')

To execute, simply call from Python:

python your_main.py

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

Is there a way for me to pinpoint the location of an error in React?

Currently, I am operating a basic React application with webpack in development mode by using the following command: webpack -w --mode development --config ./webpack.config.js This setup ensures that my code remains unminified. However, I am encounterin ...

javascriptreactjswebpack

My Gatsby website is being rendered in its HTML form on Netlify

The website build is located at . It appears that the javascript functionality is not working, and only the html version (usually meant for search engines) is being displayed. It seems like this issue is only affecting the home page. You can check out the ...

javascriptreactjsgatsbynetlify

Introduce a fresh parameter into the promise all chain

I am using the code below and it is functioning as expected. However, I now need to incorporate the modifyOpt() function. Currently, the code works and returns args[2] but I also need to include another step... I want to pass the return value (port) from ...

javascriptnode.jspromisebluebird

An issue arose with ReactDom during the development of the application

I am currently working on my final assignment for the semester, where I have created a project and finished coding it. However, when I try to load the localhost, the page remains blank even though the console in vsc shows no errors. Upon checking the conso ...

javascriptreactjs

Unhandled error in Express JS API causing undefined responses

I am a beginner in JavaScript and I have started using Express to create a REST API for the backend of my current project. However, I am encountering an issue where the API is returning undefined or the fetch statement in my main.js file seems to be alteri ...

javascriptexpress

I am in need of eliminating repetitive comments from each post

data structure can you help figure out what is causing the issue in this code that seems to be removing old comments? mutations:{ getPosts(state) { let unique = [...new Set(state.posts)]; for (let i = 0; i < uniq ...

javascriptnode.jsvue.jsvuejs2socket.io

Redux Dilemma: Stagnant Data in Redux Repository

Struggling to pass data fetched through axios into the Redux store for use in another component. While other actions and reducers are functioning correctly, this one seems to be causing issues. Here is the flow of data: Begin in the Filter component comp ...

javascriptreactjsreduxreact-reduxreact-props

What could be the reason my Angular interceptor isn't minified correctly?

I have come across this interceptor in my Angular project: angular.module('dwExceptionHandler', []) .factory('ExceptionInterceptor', ['$q', function ($q) { return function (promise) { return promise.th ...

javascriptangularjsbundling-and-minification

Issue with positioning in expanded state of the Packery isotope pack

Currently working on a website utilizing isotope packery with combination filters and an expanded state upon click. Additionally, the thumbs are sorted randomly upon page load. Encountering an issue where unfiltered thumbs return to their 'name' ...

javascriptjqueryonclickjquery-isotopepackery

Storing the $_session['username'] variable within an ajax function

I've been working on a script and I've reached the point where I need to add protection. However, I'm having trouble retrieving the $_session['username']. I can't use cookies because they are vulnerable to being faked, posing ...

phpjavascriptmysqlhtmlajax

Troubleshooting: Issues with JQuery and setTimeout() functionality

While using JQuery to monitor key presses for an HTML game, I encountered an issue where adding the jquery code to my gameloop resulted in an error message stating that keydown was not defined. <html> <head> //...Included JS files ...

javascriptjqueryhtmlsettimeoutkeydown

Tips for reordering the default key value pairs in a JavaScript object

** When working in JavaScript, I am trying to achieve a specific output by sorting all key-value pairs. How can I accomplish this efficiently? let obj1 = {"business": false, "economy": true, "first": f ...

javascriptarraysobject

A Guide to Triggering a Method Upon Component Change in Angular

When working with Angular, Components have an ngOnInit() method. I am looking for the opposite of this method. Is there a method that gets called when the component is closed? Is there a way to detect in the TypeScript file if the component is being clo ...

javascriptnode.jsangular

Using useState props in React Native navigation screens with React Navigation

I'm currently working on my first React Native app with react navigation after previously having a background in web react development. In the past, I typically used useState for managing state. For instance, rendering a list of components based on d ...

javascriptreact-nativereduxuse-statereact-native-navigation

Having trouble reaching the JSON object beyond the scope of the AJAX success function

Having trouble accessing a JSON object outside of the AJAX success scope? Need to find a solution to this problem? Look no further! This is what was initially attempted: An approach that works but may not be suitable for your needs: $(' ...

javascriptphpjqueryajaxjson

Discover the process of attaching an event to the keyboard display within a Cordova application

I've exhausted my efforts trying to figure out how to assign an event for when the virtual keyboard appears on my hybrid cordova app. I'm looking to trigger a specific action whenever the keyboard shows up in my app consistently. ...

javascriptangularjscordova

Submitting an HTML form with no input data

Looking to dynamically pass arguments between pages using the code below: <script type="text/javascript> function buildAndSubmitForm(index){ <? $args = 't='.$team.'&s='.$season.'&l='.$league.&apo ...

phpjavascriptjqueryhtml

Is there a way to confirm when all 3 html pages (panes) have been completely refreshed?

I have a webpage with 4 panes, each implemented as separate HTML pages. The last pane needs to perform an action when the previous 3 panes are refreshed. For instance, while the first 3 panes are refreshing, the last pane should display a "LOADING" message ...

javascriptjqueryhtml

Creating a Custom Container to perfectly Fit an Image

I am currently utilizing heatmap.js within Google Apps Script and I'm facing the challenge of resizing the heatmap canvas to match an image. Is there a way to modify the javascript or styling to achieve this functionality? CODE: https://jsfiddle.net/ ...

javascripthtmlcssgoogle-apps-script

`req.user` seems to be unresolved, but it is actually defined

Currently, I am working on developing an Express.js application that utilizes Passport.js for authentication in an administration panel. The program is functioning correctly at the moment, with my app.js initializing passport and setting up sessions proper ...

javascriptnode.jsexpresspassport.js