Heck of a time with threeJS and electron

Questions
3

Look at electron as if it was just a browser - if a browser can run your website / app, so can electron (they work virtually the same, electron just extending the API served by the browser a bit.) That being said - it does not matter if / what libraries you use on your website, be that three.js or any other npm package - it should and will work with electron after bundling everything up.

Personally, I’d suggest scrapping the entire thing and quickly starting over - since setting it up fresh will likely just be easier and quicker:

  1. Create your app - it should have an index.html, and a single .js file. Use vite to bundle your javascript, HTML, and styles together into a static page.
  2. After your page is built into a static set of files, npm i express (express webserver.)
  3. Initialise your electron project in a neighbouring directory, for example (ofc feel free to adjust it to your preferences) :
- MyElectronApp/
  - web/
    - package.json: this package contains ONLY dependencies of your app, not electron
    - src/
      - index.html
      - some-js-file.js
    - dist/
      - index.html
      - bundle.js
  - electron/
    - package.json: this package.json contains electron and other non-web dependencies
    - index.js
    - preload.js
    - app/
      - (empty)
  1. In package.json of electron, add a build script that copies contents of MyElectronApp/web/dist/ into MyElectronApp/electron/app.
  2. In index.js of electron start express.js server and ask it to serve contents of MyElectronApp/electron/app as localhost:8181 (or another port, up to your preferences.)
  3. In index.js of electron, await browserWindow.loadURL("http://localhost:8181"); (docs.)
  4. Celebrate great success.
1 Like