{"id":26833055,"url":"https://github.com/ermjs/electron-starter","last_synced_at":"2025-08-24T12:33:36.716Z","repository":{"id":197006874,"uuid":"697792814","full_name":"ermjs/Electron-Starter","owner":"ermjs","description":"This Electron starter application is designed to help beginners get started with Electron development. It includes improved security codes, a ready IPC communication setup, the Material Icons library, and the Bulma.css framework. With these features, you can quickly build a secure and modern desktop application using web technologies.","archived":false,"fork":false,"pushed_at":"2025-03-27T08:59:39.000Z","size":594,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-08T22:03:20.943Z","etag":null,"topics":["electron","electron-ipc-async","electron-ipc-communication","javascript","nodejs"],"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/ermjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-09-28T13:41:02.000Z","updated_at":"2025-03-27T08:59:42.000Z","dependencies_parsed_at":"2024-07-16T09:25:24.626Z","dependency_job_id":"bb583cf3-0d14-4d8d-8b2d-77c92cad307a","html_url":"https://github.com/ermjs/Electron-Starter","commit_stats":null,"previous_names":["erman999/electron-starter","ermjs/electron-starter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ermjs/Electron-Starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ermjs%2FElectron-Starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ermjs%2FElectron-Starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ermjs%2FElectron-Starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ermjs%2FElectron-Starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ermjs","download_url":"https://codeload.github.com/ermjs/Electron-Starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ermjs%2FElectron-Starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271863627,"owners_count":24835833,"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","status":"online","status_checked_at":"2025-08-24T02:00:11.135Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","electron-ipc-async","electron-ipc-communication","javascript","nodejs"],"created_at":"2025-03-30T15:26:38.037Z","updated_at":"2025-08-24T12:33:36.643Z","avatar_url":"https://github.com/ermjs.png","language":"JavaScript","readme":"# Electron Starter\n\n\u003ch3 align=\"center\"\u003e\n\u003cimg alt=\"Badge\" src=\"https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=for-the-badge\u0026logo=JavaScript\u0026logoColor=black\"/\u003e\n\u003cimg alt=\"Badge\" src=\"https://img.shields.io/badge/Node.js-339933.svg?style=for-the-badge\u0026logo=nodedotjs\u0026logoColor=white\"/\u003e\n\u003cimg alt=\"Badge\" src=\"https://img.shields.io/badge/Electron-47848F.svg?style=for-the-badge\u0026logo=Electron\u0026logoColor=white\"/\u003e\n\u003cimg alt=\"Badge\" src=\"https://img.shields.io/badge/Bulma-00D1B2.svg?style=for-the-badge\u0026logo=Bulma\u0026logoColor=white\"/\u003e\n\u003cimg alt=\"Badge\" src=\"https://img.shields.io/badge/Material%20Design%20Icons-2196F3.svg?style=for-the-badge\u0026logo=Material-Design-Icons\u0026logoColor=white\"/\u003e\n\u003c/h3\u003e\n\u003cbr/\u003e\n\nThis is a starter Electron application that is great for beginners who want to get started with Electron development. It includes the following features:\n\n- Improved security codes\n- Ready IPC communication setup\n- Material Icons library\n- Bulma.css framework\n\n\n## Screenshots\nHere are some screenshots of the Electron Starter:\n\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/erman999/Electron-Starter/master/screenshots/renderer.jpg\" width=\"600\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/erman999/Electron-Starter/master/screenshots/main.jpg\" width=\"600\"\u003e\u003c/p\u003e\n\u003cbr/\u003e\n\n## Getting Started\n\nTo get started with this application, simply clone the repository and run the following commands:\n\n```bash\ngit clone https://github.com/ermjs/Electron-Starter.git\ncd Electron-Starter\nnpm install\nnpm start\n```\n\nThis will install all the necessary dependencies and start the application.\n\n## Features\n\n### Improved Security Codes\n\nThis application includes improved security codes to help keep your application secure.\nIn `main.js` file check for `nodeIntegration` and `contextIsolation` properties.\nSearch these settings for better understanding about Electron security.\n\n### Ready IPC Communication Setup\n\nThe application also includes a ready IPC communication setup, which makes it easy to communicate between the main process and the renderer process.\nCheck `channels` in `main.js`, `preload.js` and `renderer.js` these communication technique will lead you to use correct way of understanding IPC communication.\n\nThere are 4 different ways to communicate `renderer.js` with `main.js`.\n\n1. Renderer to Main\n```js\n// renderer.js\nwindow.ipcRender.send('channel-1', data); // Data is optional.\n\n// main.js\nipcMain.on('channel-1', (event, data) =\u003e { console.log(data); });\n```\n\n2. Main to Renderer\n```js\n// main.js\nmainWindow.webContents.send('channel-2', data); // Data is optional.\n\n// renderer.js\nwindow.ipcRender.receive('channel-2', (data) =\u003e { console.log(data); });\n```\n\n3. Renderer to Main (Value) return to Renderer\n```js\n// renderer.js\nwindow.ipcRender.invoke('channel-3', data).then((result) =\u003e { console.log(result); });\n\n// main.js\nipcMain.handle('channel-3', (event, data) =\u003e { return data; });\n```\n\n4. Renderer to Main (Promise) return to Renderer\n```js\n// renderer.js\nwindow.ipcRender.invoke('channel-4', data).then((result) =\u003e { console.log(result); });\n\n// main.js    \nipcMain.handle('channel-4', async (event, data) =\u003e {\n  const myPromise = new Promise((resolve, reject) =\u003e {\n    setTimeout(() =\u003e {\n      resolve({test: 'foo'});\n    }, 300);\n  });\n  return await myPromise.then((result) =\u003e { return result; });\n});\n```\n\nAs a final step you will need to configure `preload.js` file. It is a great way to use `White-listed channels` for ease of use of IPC.\n\n```js\n// preload.js\n\n// Import the necessary Electron components\nconst contextBridge = require('electron').contextBridge;\nconst ipcRenderer = require('electron').ipcRenderer;\n\n// White-listed channels\nconst ipc = {\n  // From render to main\n  'render': {\n    'send': [\n      'channel-1'\n    ],\n    // From main to render\n    'receive': [\n      'channel-2'\n    ],\n    // From render to main and back again\n    'sendReceive': [\n      'channel-3',\n      'channel-4'\n    ]\n  }\n};\n\n// Exposed protected methods in the render process\ncontextBridge.exposeInMainWorld(\n  // Allowed 'ipcRenderer' methods\n  'ipcRender', {\n    // From render to main\n    send: (channel, args) =\u003e {\n      let validChannels = ipc.render.send;\n      if (validChannels.includes(channel)) {\n        ipcRenderer.send(channel, args);\n      }\n    },\n    // From main to render\n    receive: (channel, listener) =\u003e {\n      let validChannels = ipc.render.receive;\n      if (validChannels.includes(channel)) {\n        // Deliberately strip event as it includes `sender`\n        ipcRenderer.on(channel, (event, ...args) =\u003e listener(...args));\n      }\n    },\n    // From render to main and back again\n    invoke: (channel, args) =\u003e {\n      let validChannels = ipc.render.sendReceive;\n      if (validChannels.includes(channel)) {\n        return ipcRenderer.invoke(channel, args);\n      }\n    }\n  }\n);\n```\n\n\n### Material Icons Library\n\nThe Material Icons library is included in this application, which makes it easy to add icons to your application.\n\nCheck `\u003cspan class=\"material-symbols-rounded\"\u003enavigate_next\u003c/span\u003e` usage in `index.html`.\n\nGo to [Material Icons](https://fonts.google.com/icons) page for more icons.\n\n### Bulma.css Framework\n\nThe Bulma.css framework is also included in this application, which provides a great starting point for building responsive and modern user interfaces.\n\n### Package and Distribute\n\nI strongly recommend to use `Electron Forge` for packaging.\n\nInstall Electron Forge.\n```bash\nnpm install --save-dev @electron-forge/cli\n```\n\nImporting an Existing Project.\n```bash\nnpm exec --package=@electron-forge/cli -c \"electron-forge import\"\n```\n\nAfter installation `Electron Forge` will update `package.json` file.\nWhen you type `npm start`, `Electron Forge Start` will start, not Electron.\nSo I separate `Electron Start` from `Electron Forge Start`.\n\nCall `npm start` for Electron start.\nCall `npm run start-forge` for Electron Forge start.\n\n\n```js\n// package.json\n{\n  \"name\": \"Electron-Starter\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"main.js\",\n  \"author\": \"erman999\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"electron .\", // Here\n    \"start-forge\": \"electron-forge start\", // and here\n    \"package\": \"electron-forge package\",\n    \"make\": \"electron-forge make\"\n  },\n  \"devDependencies\": {\n    \"@electron-forge/cli\": \"^6.4.2\",\n    \"@electron-forge/maker-deb\": \"^6.4.2\",\n    \"@electron-forge/maker-rpm\": \"^6.4.2\",\n    \"@electron-forge/maker-squirrel\": \"^6.4.2\",\n    \"@electron-forge/maker-zip\": \"^6.4.2\",\n    \"@electron-forge/plugin-auto-unpack-natives\": \"^6.4.2\",\n    \"electron\": \"^26.0.0\"\n  },\n  \"dependencies\": {\n    \"electron-squirrel-startup\": \"^1.0.0\",\n  }\n}\n\n```\n\nElectron forge will also create `forge.config.js` file for packaging configurations. Here is an example usage of config file.\n\n`packagerConfig.icon` doesn't require file extension. Electron will automatically package your app with correct icon format.\n\n```js\n// forge.config.js\nmodule.exports = {\n  packagerConfig: {\n    asar: true,\n    name: 'Electron Starter',\n    productName: 'Electron Starter',\n    executableName: 'Electron Starter',\n    ignore: ['./folderName'],\n    extraResource: ['./folderName'],\n    icon: './img/icons/icon'\n  },\n  rebuildConfig: {},\n  makers: [\n    {\n      name: '@electron-forge/maker-squirrel',\n      config: {\n        setupIcon: './img/icons/icon.ico'\n      },\n    },\n    {\n      name: '@electron-forge/maker-zip',\n      platforms: ['win32', 'darwin'],\n    },\n    {\n      name: '@electron-forge/maker-deb',\n      config: {},\n    },\n    {\n      name: '@electron-forge/maker-rpm',\n      config: {},\n    },\n  ],\n  plugins: [\n    {\n      name: '@electron-forge/plugin-auto-unpack-natives',\n      config: {},\n    },\n  ],\n};\n```\n\nWhen distributing a package for Windows it's recommend to use `Squirrel.Windows` (which gives you `YourApp Setup.exe` executable).\n\nInstall Electron Squirrel.\n\n```bash\nnpm install electron-squirrel-startup\n```\n\nAlso add below line to very top of `main.js` file. I usually add after declaring `app` constant.\n\n```js\n// main.js\nif (require('electron-squirrel-startup')) app.quit();\n```\n\nTop of `main.js` file should look like this.\n\n```js\n// main.js\nconst { app, BrowserWindow, ipcMain } = require('electron');\nconst path = require('node:path');\n\n// *** Here ***\nif (require('electron-squirrel-startup')) app.quit();\n```\n\n*If you don't add this line to your `main.js` file. Your app will start during installation and you will probably see some errors. This piece of code prevents users to see some kind of weird errors.*\n\nAfter you finish configuration. Run `npm run make` to create your packages.\nYou will see created packages in `out` folder.\n\n### Uninstalling Application\n\nNeither Electron nor Squirrel have uninstaller. \nBest option is to use Windows native uninstaller.\nIt's usually called as `Program and Features` and for newer Windows versions it's under `Settings -\u003e Apps -\u003e Installed Apps`.\nAfter you uninstall your application some files will still remain in `AppData` folder.\nYou can find exact addresses for remaining files below.\n\n```\nC:\\Users\\\u003cYOUR_USER\u003e\\AppData\\Local\\electron_starter\nC:\\Users\\\u003cYOUR_USER\u003e\\AppData\\Roaming\\electron-starter\n```\n\n\n### Optional:  Prevent App to Close When Close Button Clicked and Restore App From Tray\n\nYou need to define `Menu` and `Tray` objects like below.\n\n```js\n// main.js\nconst { app, BrowserWindow, ipcMain, Menu, Tray } = require('electron');\n```\n\nPrevent window from closing when close button clicked.\nAdd below `close` event listener to `createWindow` function after you declare `mainWindow` object.\n\n```js\n// main.js\n\nfunction createWindow () {\n  mainWindow = new BrowserWindow({...});\n  // ...\n\n  // Here\n  mainWindow.on('close', function (event) {\n    event.preventDefault();\n    mainWindow.hide();\n  });\n\n}\n```\n\nDeclare a global tray variable.\n\n```js\n// main.js\nlet tray = null;\n```\n\nThen add below code in `app.whenReady` function.\n\n```js\n// main.js\n\napp.whenReady().then(() =\u003e {\n  \n  // Create Tray object\n  tray = new Tray(path.join(__dirname, 'node.ico'));\n  // Prepare context menu\n  const contextMenu = Menu.buildFromTemplate([\n    { label: 'Show App', click:  function() {\n      mainWindow.show();\n    } },\n    { label: 'Quit', click:  function() {\n      mainWindow.destroy();\n      app.quit();\n    } }\n  ]);\n  // Change here as you wish\n  tray.setToolTip('This is Electron Starter');\n  // Set tray context menu\n  tray.setContextMenu(contextMenu);\n  \n  // Other codes...\n});\n```\n\n\n### Optional: Auto Start App\n\nIn order to start app on system startup, add below code after `app` declaration.\n\n```js\napp.setLoginItemSettings({\n  openAtLogin: true\n});\n```\n\n`Windows` -\u003e If users don't want app to start on system startup, they can disable it from `Task Manager -\u003e Startup Apps`.\nHowever, this operation won't delete created registy from the system.\nSo, if you don't event want to see it on the `Startup Apps` list, check below registry addresses and delete related registy.\n\nPress `Win + R` and type `regedit` and click `OK` button.\n\n```\nHKEY_CURRENT_USER\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Run\nHKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Run\nHKEY_CURRENT_USER\\SOFTWARE\\WOW6432Node\\Microsoft\\Windows\\CurrentVersion\\Run\nHKEY_LOCAL_MACHINE\\SOFTWARE\\WOW6432Node\\Microsoft\\Windows\\CurrentVersion\\Run\n\n```\n\n### Optional: Windows Refresh Icon Cache\nie4uinit.exe -show\n\n\n## Contributing\n\nIf you find any issues with this application or would like to contribute, please feel free to submit a pull request or open an issue.\n\n## License\n\nThis application is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.\n\n## Acknowledgments\n\nThis application was inspired by [electron-quick-start](https://github.com/electron/electron-quick-start).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fermjs%2Felectron-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fermjs%2Felectron-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fermjs%2Felectron-starter/lists"}