CODEWITHSUNDEEP
node.jsdirectoryelectron
Avinav Chalise
Avinav Chalise

Reputation: 17

How to keep the main code separately from index.js electron?

Is it possible to keep have this project structure and make it work properly?

What I wanted to achieve (basic electron structure but the main code is kept within another folder): Package.json's "start": "..." loads into index.js

index.js loads to index.html which is in the MainCode folder

(please ignore index.py)

This was the beginning code for index.js

const { app, BrowserWindow } = require("electron");
function createWindow() {
    // Create the browser window.
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    // and load the index.html of the app.
    const path = require ("path");
    win.loadFile (path.join (__dirname, "MainCode", "index.html"));
}
app.on("ready", createWindow);

This wasn't the previous code, this the updated one suggested by one of the answers.

And this was of package.json

{
  "name": "filler",
  "version": "1.0.0",
  "description": "This is to distract you",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.2.2",
    "jquery": "^3.5.1"
  }
}

Edit: I tried doing it as suggested by one of the comments, but I get this error: <avinav@avinav-Inspiron-5468:~/Documents/PYTHON/helpingTEACHERS!/Filler$ npm start

[email protected] start /home/avinav/Documents/PYTHON/helpingTEACHERS!/Filler electron .

sh: 1: electron: not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! [email protected] start: electron . npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/avinav/.npm/_logs/2021-02-04T14_07_18_026Z-debug.log I think it has something to do with the package.json, but I don't know exactly what is happening

Upvotes: 0

Views: 298

Answers (1)

Alexander Leithner
Alexander Leithner

Reputation: 3442

To load your index.html file from the folder MainCode into the BrowserWindow you're instantiating, you can do so by replacing

win.loadFile ("index.html");

with

win.loadFile ("MainCode/index.html");

However, it is more portable to use the following code:

const path = require ("path");
win.loadFile (path.join (__dirname, "MainCode", "index.html"));

This will create a file system path suitable for your OS based upon the current directory (__dirname stores the path to the directory the currently executed script is located in under Node.js).

Upvotes: 1

Related Questions