@adityavijay21/electron-hotreload
is a powerful npm package designed to enhance your Electron development workflow by providing seamless hot-reloading for both the main and renderer processes. π This package integrates electron-reload
and nodemon
to automatically reload your Electron app when changes are detected. Say goodbye to manual restarts and hello to a smoother development experience! π
- Automatic Reloading: Instantly reloads your Electron app when changes are made to your source files. π₯
- Seamless Integration: Easy setup with minimal configuration required. βοΈ
- Supports Multiple File Types: Monitors JavaScript, JSON, HTML, and CSS files. π
To get started with @adityavijay21/electron-hotreload
, follow these steps:
-
Install the Package:
Add the package as a development dependency to your Electron project:
npm install @adityavijay21/electron-hotreload --save-dev
-
Set Up Your Electron Project:
Ensure your project has a basic Electron setup with a
main.js
file (or equivalent) for the main process.
-
Create/Update Your
main.js
:Add the following code to your
main.js
(or equivalent entry point) to include the hot-reload setup:// main.js const path = require('path'); require('@adityavijay21/electron-hotreload').setupHotReload(__dirname, 'src'); const { app, BrowserWindow } = require('electron'); const createWindow = () => { const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }); mainWindow.loadFile('index.html'); }; app.whenReady().then(() => { createWindow(); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit(); });
-
Create/Update Your
nodemon.json
:Ensure you have a
nodemon.json
file in the root of your project with the following configuration:{ "watch": ["main.js", "src/**/*"], "ext": "js,json,html,css", "exec": "electron ." }
-
Add a Start Script:
Update your
package.json
to include a start script that usesnodemon
:"scripts": { "start": "nodemon" }
-
Run Your Application:
Start your Electron application with hot-reloading enabled:
npm start
The setupHotReload
function from @adityavijay21/electron-hotreload
requires two parameters:
projectRoot
: The root directory of your Electron project. ποΈsrcPath
: The path to the directory where your source files are located (relative toprojectRoot
). π
require('@adityavijay21/electron-hotreload').setupHotReload(__dirname, 'src');
We welcome contributions to @adityavijay21/electron-hotreload
! Follow these steps to contribute:
- Fork the Repository: Fork the repository on GitHub and clone it to your local machine. π΄
- Create a Branch: Create a new branch for your changes. πΏ
- Make Changes: Implement your changes or new features. βοΈ
- Test Your Changes: Ensure everything works as expected. π§ͺ
- Submit a Pull Request: Submit a pull request to merge your changes into the main repository. π
This project is licensed under the MIT License - see the LICENSE file for details.
For questions or further assistance, feel free to reach out:
- Email: [email protected]
- GitHub: github.com/adityavijay21
Thank you for using @adityavijay21/electron-hotreload
! Happy coding! ππ»