{"id":13766784,"url":"https://github.com/manidlou/elemon","last_synced_at":"2025-03-16T19:31:44.071Z","repository":{"id":57222277,"uuid":"59098337","full_name":"manidlou/elemon","owner":"manidlou","description":"live-reload Electron application during development","archived":false,"fork":false,"pushed_at":"2021-02-14T00:20:30.000Z","size":184,"stargazers_count":73,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-27T12:26:44.025Z","etag":null,"topics":["electron","live-reload"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manidlou.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-18T08:49:38.000Z","updated_at":"2024-09-19T02:37:38.000Z","dependencies_parsed_at":"2022-09-05T06:51:23.250Z","dependency_job_id":null,"html_url":"https://github.com/manidlou/elemon","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manidlou%2Felemon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manidlou%2Felemon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manidlou%2Felemon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manidlou%2Felemon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manidlou","download_url":"https://codeload.github.com/manidlou/elemon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826780,"owners_count":20354220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","live-reload"],"created_at":"2024-08-03T16:01:00.849Z","updated_at":"2025-03-16T19:31:43.703Z","avatar_url":"https://github.com/manidlou.png","language":"JavaScript","readme":"elemon\n======\n\n[![npm](https://img.shields.io/npm/v/elemon.svg?style=flat-square)](https://www.npmjs.com/package/elemon)\n\n\u003ca href=\"https://github.com/feross/standard\" style=\"float: right; padding: 0 0 20px 20px;\"\u003e\u003cimg src=\"https://cdn.rawgit.com/feross/standard/master/sticker.svg\" alt=\"Standard JavaScript\" width=\"100\" align=\"right\"\u003e\u003c/a\u003e\n\n`elemon` is a tiny module that tries to provide a simple and yet efficient live-reload tool when developing [Electron](https://github.com/electron/electron) applications. You just need to pass the `app` and `BrowserWindows` and the name of the files that are associated with them as a parameter to the `elemon` function **after** your app is `ready`. Please check out the example below to see how you can easily use it to watch your app and cleanly reload it upon any changes. If the changed\nfile is the main app file, then it `relaunch` the app and `exit` the current instance. If the changed file is a file that is associated with a browser window, then that window will only be reloaded.\n\nIn fact, setting up a clean live-reload tool when developing an electron application is super simple by using the [Electron API](https://github.com/electron/electron/tree/master/docs). The api already comes with whatever you need; just add a watcher (like [chokidar](https://github.com/paulmillr/chokidar) or whatever watcher you like) and you are all set.\n\nInstall\n-------\n\n  `npm i elemon --save-dev`.\n\nUsage\n-----\n\n**elemon(refs)**\n\n`refs` `{Object}` object that takes references to app and browser windows objects and resources\n  - `app` `{Object}` main [app](https://github.com/electron/electron/blob/master/docs/api/app.md) object\n  - `mainFile` `{String}` main file name\n  - `bws` `{Array\u003cObject\u003e}` array of browser window objects and their resources `[{bw:, res: []}]`\n    - `bw` `{Object}` [BrowserWindow](https://github.com/electron/electron/blob/master/docs/api/browser-window.md) object\n    - `res` `{Array\u003cString\u003e}` array of any file name that is somehow associated with this browser window\n      - _if you want to watch all files in dir, or if you want the `bw` to be reloaded on any changes and not necessarily changes on specific file(s), leave the `res` as empty `[]`._\n\nExample\n-------\n\nSuppose it is the app file structure:\n\n```\nexample_proj\n  |\n  |__views\n  |    |__win1.html\n  |    |__win2.html\n  |    |__win1.js\n  |    |__win2.js\n  |\n  |__stylesheets\n  |    |__style.css\n  |\n  |__main.js\n\n```\nthen, in the main process file where usually app and browser windows are created:\n\n*main.js*\n\n```js\n\nconst {app, BrowserWindow} = require('electron')\nconst path = require('path')\nconst url = require('url')\nconst elemon = require('elemon')\n\nlet win1, win2\n\nfunction createWindows () {\n  win1 = new BrowserWindow({width: 800, height: 600})\n  win1.loadURL(url.format({\n    pathname: path.join(__dirname, 'views', 'win1.html'),\n    protocol: 'file:',\n    slashes: true\n  }))\n  win1.on('closed', () =\u003e {\n    win1 = null\n  })\n\n  win2 = new BrowserWindow({width: 800, height: 600})\n  win2.loadURL(url.format({\n    pathname: path.join(__dirname, 'views', 'win2.html'),\n    protocol: 'file:',\n    slashes: true\n  }))\n  win2.on('closed', () =\u003e {\n    win2 = null\n  })\n}\n\n// ... and other usual stuff ... //\n\napp.on('ready', () =\u003e {\n  createWindows()\n\n  // this is all that you have to add to your main app script.\n  // run your app normally with electron, then it will be reloaded\n  // based on how you define references here\n  elemon({\n    app: app,\n    mainFile: 'main.js',\n    bws: [\n      {bw: win1, res: ['win1.html', 'win1.js', 'style.css']},\n      {bw: win2, res: ['win2.html', 'win2.js', 'style.css']}\n    ]\n  })\n})\n```\nIf you want to make sure that you don't get undefined error when you build your app, you can use `elemon` along with [electron-is-dev](https://github.com/sindresorhus/electron-is-dev) like this:\n\n`npm i electron-is-dev --save`\n\n```js\nconst {app, BrowserWindow} = require('electron')\nconst isDev = require('electron-is-dev')\n\nfunction createWindows () {\n  // ...\n}\n\napp.on('ready', () =\u003e {\n  createWindows()\n\n  if (isDev) {\n    const elemon = require('elemon') // require elemon if electron is in dev\n    elemon({\n      app: app,\n      mainFile: 'main.js',\n      bws: [\n        {bw: win1, res: ['win1.html', 'win1.js', 'style.css']},\n        {bw: win2, res: ['win2.html', 'win2.js', 'style.css']}\n      ]\n    })\n  }\n})\n```\n\nThat's it. Have fun writing your [Electron](https://github.com/electron/electron) applications.\n","funding_links":[],"categories":["Tools","Library"],"sub_categories":["For Electron","Dev Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanidlou%2Felemon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanidlou%2Felemon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanidlou%2Felemon/lists"}