This approach must be used only in development environment. In the release version of your application, the app directory should be self-contained with all used files.
Problem
When using the two package.json structure, if your app runs the main process (executed by Electron) outside the /app folder during development, you may need to load the /app dependencies manually.
The app dependencies are placed at /app/node_modules, and your main process running in a different directory will not have access to that directory by default.
Solution
Instead of duplicating the app dependencies in the development package.json, you can make the Electron main process load the app dependencies manually.
Implementation
Here’s how to load app dependencies manually in your main process:
// given this file is: /src/browser/main.js
const path = require('path')
const devMode = (process.argv || []).indexOf('--dev') !== -1
// load the app dependencies in dev mode
if (devMode) {
const PATH_APP_NODE_MODULES = path.join(__dirname, '..', '..', 'app', 'node_modules')
const Module = require('module')
// for electron 16 or lower
Module.globalPaths.push(PATH_APP_NODE_MODULES)
// for electron 17 or higher
const nodeModulePaths = Module._nodeModulePaths
Module._nodeModulePaths = (from) =>
nodeModulePaths(from).concat([PATH_APP_NODE_MODULES])
}
How It Works
- Detect development mode - The code checks for a
--dev flag in the command line arguments
- Construct path - Creates the path to
/app/node_modules relative to the current file
- Modify module resolution - Adds the app’s
node_modules directory to Node’s module search paths
Version Compatibility
- Electron 16 or lower - Use
Module.globalPaths.push(PATH_APP_NODE_MODULES)
- Electron 17 or higher - Override
Module._nodeModulePaths to include the app’s node_modules path
Example Usage
You can launch your app in development mode with the --dev flag:
Or add it to your package.json scripts:
{
"scripts": {
"dev": "electron . --dev",
"start": "electron ."
}
}