How to build ThreeJS + Electron
Step 1.) Use vite to bundle the app into a static page. Deploying a Static Site | Vite
Step 1a.) If you have imported a custom GLTF or .glb from blender, then those files must be placed inside the vite public folder. DO NOT add the public folder name into the path where you load those files in your threeJS code. (This must be some strange characteristic of the public folder.) Vite will include files inside the public folder in your dist folder after you build. (according to this source: glb model is not found after I run npm run build in vite · pmndrs/react-three-fiber · Discussion #2792 · GitHub).
npm run build
npm run preview
In the browser, use the shortcut CTL + SHIFT + J to inspect the browsers DevTools for errors. (In Windows) For non-windows, see this Keyboard shortcuts | DevTools | Chrome for Developers
Step 2.) Install express using the following command:
npm i express
Step 3.) Make a brand new directory and initialize an electron app.
I’m just gonna use a previously created electron app to understand the recommended file structure.
So, I created a brand new electron app in a neighboring directory. I setup with vanilla JS and no typescript and no proxy, with the plugin for the electron updated. I installed/configured it with vite since the threeJS project also has that. The project structure looks like this, side by side with the original three project.
Lets see how that compares with the original description of how the project ought to be structured.
This is a little confusing. i don’t see a dist folder anywhere except in the threeJS project. I think vite makes a dist folder when we setup for production.
It’s wrong. I have two node_modules folders in there. I must have initialized more than once somehow.
