{"id":23093151,"url":"https://github.com/crispengari/electron-startup","last_synced_at":"2026-04-13T06:07:33.349Z","repository":{"id":43053460,"uuid":"500711206","full_name":"CrispenGari/electron-startup","owner":"CrispenGari","description":"📁 in this repository we are going to have a look at electron.js for native desktop application development and create electron.js applications.","archived":false,"fork":false,"pushed_at":"2022-07-14T09:49:20.000Z","size":277,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T17:02:41.597Z","etag":null,"topics":["cross-platform","css","desktop-apps","electron","html","javascript","react","typescript","vue"],"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/CrispenGari.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}},"created_at":"2022-06-07T06:08:28.000Z","updated_at":"2022-07-07T14:34:53.000Z","dependencies_parsed_at":"2022-07-09T02:16:30.562Z","dependency_job_id":null,"html_url":"https://github.com/CrispenGari/electron-startup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Felectron-startup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Felectron-startup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Felectron-startup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Felectron-startup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrispenGari","download_url":"https://codeload.github.com/CrispenGari/electron-startup/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247061240,"owners_count":20877166,"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":["cross-platform","css","desktop-apps","electron","html","javascript","react","typescript","vue"],"created_at":"2024-12-16T21:46:35.085Z","updated_at":"2026-04-13T06:07:33.302Z","avatar_url":"https://github.com/CrispenGari.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### electron startup\n\nIn this repository we are going to have a look on how we can build effective and efficient cross-platform desktop applications using electron.js.\n\n\u003cimg src=\"cover.png\" alt=\"electron.js\" width=\"100%\"/\u003e\n\n### Languages\n\nThe following languages will be used in this repository.\n\n```shell\n- javascript (js)\n- typescript (ts)\n```\n\n### Getting started.\n\nIn this section we are going to create a simple electron application. We are going to start by installation of `electron`\n\n\u003e The `code` for this section will be found in the `00_GET_STARTED` folder, of this repository.\n\nBefore we start make sure that you have `node` and `npm` installed on your computer. To check that we run the following commands:\n\n```shell\nnode -v\n# npm\nnpm -v\n\n```\n\nIf you don't get any error which means we are good to go.\n\n\u003e In this example we are going to use the `yarn` package manager to create our new electron package. First we will run the following command to create the `yarn` package in node.js:\n\n```shell\nyarn init\n\n# for npm\nnpm init\n```\n\nAfter answering some questions a package.json file will be created in the `00_GET_STARTED` folder and it will look as follows\n\n```json\n{\n  \"name\": \"00_GET_STARTED\",\n  \"version\": \"1.0.0\",\n  \"description\": \"this is a simple electron application.\",\n  \"main\": \"main.js\",\n  \"author\": \"CrispenGari\",\n  \"license\": \"MIT\"\n}\n```\n\n### Installing `electron`\n\nAccording to the docs electron is installed as a dev dependence. so we need to install electron as follows.\n\n```shell\nyarn add --dev electron\n\n# npm\nnpm i --save-dev electron\n```\n\nAfter electron has been installed we need to go to our `package.json` and add the `start` scripts as follows:\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"electron .\"\n  }\n}\n```\n\nWe will need to create a `main.js` file in the root of the project, this is the entrypoint to an electron package. This script controls the main process, which runs in a full Node.js environment and is responsible for controlling your app's lifecycle, displaying native interfaces, performing privileged operations, and managing renderer processes (more on that later).\n\n### Creating a webpage.\n\nFor code organization in our project we are going to create a folder called `src`. In this folder we are going to create two sub-folders which are `scripts`, `styles` and `public`. In the public folder we are going to create an `index.html` and add the following code into it.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003clink rel=\"stylesheet\" href=\"../styles/index.css\" /\u003e\n    \u003ctitle\u003eElectron App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class=\"app\"\u003e\n      \u003ch1\u003eHello Electron.js\u003c/h1\u003e\n      \u003cp\u003e\n        This is an electron application that was built with Node version:\n        \u003cspan class=\"node\"\u003e\u003c/span\u003e, Chrome version:\n        \u003cspan class=\"chrome\"\u003e\u003c/span\u003e and Electron version:\n        \u003cspan class=\"electron\"\u003e \u003c/span\u003e\n      \u003c/p\u003e\n    \u003c/div\u003e\n    \u003cscript src=\"../scripts/index.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIn the above html file we have linked a `css` file which will be responsible for styling our webpage and we added the following code into it:\n\n```css\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n\n.app {\n  display: flex;\n  flex-direction: column;\n}\nspan {\n  background-color: lightgray;\n  padding: 2px 5px;\n  border-radius: 3px;\n  font-family: \"Courier New\", Courier, monospace;\n}\n```\n\nWe have also linked the `index.js` which is the `renderer` and because it runs in a web browser it gives us the ability to add more functionality to our webpage. Our `index.js` renderer file will have the following code in it\n\n```js\nconsole.log(\"Hello world from the renderer.\");\n```\n\n### Main process\n\nThe main process happened in the `main.js` file. This is the main file electron will be looking for. We need to import two basic modules from electron which are:\n\n1. The `app` module, which controls your application's event lifecycle.\n2. The `BrowserWindow` module, which creates and manages application windows.\n\nWe will then create a function called `createWindow` which will create a BrowserWindow and load our `html` file. The `BrowserWindow` class accepts different options which can be found in the official documentation\n\nIn Electron, browser windows can only be created after the `app` module's ready event is fired. You can wait for this event by using the `app.whenReady()` API. Call `createWindow()` after `whenReady()` resolves its Promise.\n\n```js\n//  imports\nconst path = require(\"path\");\nconst { app, BrowserWindow } = require(\"electron\");\n\n// createWindow Function\n\nconst createWindow = () =\u003e {\n  const mainWindow = new BrowserWindow({\n    width: 800,\n    height: 600,\n    webPreferences: {\n      preload: path.join(__dirname, \"src/scripts/preload.js\"), // path to our preload.js file\n    },\n  });\n\n  mainWindow.loadFile(path.join(__dirname, \"src/public/index.html\")); // path to our html file\n\n  // Open the DevTools.\n  mainWindow.webContents.openDevTools();\n};\n\n// This method will be called when Electron has finished\n// initialization and is ready to create browser windows.\n// Some APIs can only be used after this event occurs.\napp.whenReady().then(() =\u003e {\n  createWindow();\n\n  app.on(\"activate\", () =\u003e {\n    // On macOS it's common to re-create a window in the app when the\n    // dock icon is clicked and there are no other windows open.\n    if (BrowserWindow.getAllWindows().length === 0) createWindow();\n  });\n});\n\n// Quit when all windows are closed, except on macOS. There, it's common\n// for applications and their menu bar to stay active until the user quits\n// explicitly with Cmd + Q.\napp.on(\"window-all-closed\", () =\u003e {\n  if (process.platform !== \"darwin\") app.quit();\n});\n\n// In this file you can include the rest of your app's specific main process\n// code. You can also put them in separate files and require them here.\n```\n\n### The preload script.\n\nA preload script runs before the renderer process is loaded, and has access to both renderer globals (e.g. `window` and `document`) and a `Node.js` environment. In our `preload.js` file we added the following code to it:\n\n```js\nwindow.addEventListener(\"DOMContentLoaded\", () =\u003e {\n  const replaceText = (selector, text) =\u003e {\n    const element = document.querySelector(selector);\n    if (element) element.innerText = text;\n  };\n  for (const dependency of [\"chrome\", \"node\", \"electron\"]) {\n    replaceText(`.${dependency}`, process.versions[dependency]);\n  }\n});\n```\n\n### Packaging and app distribution\n\nThe fastest way to distribute your newly created app is using `Electron Forge`.\n\n\u003e First we need to add electron-forge as a `dev` dependence in our project as follows:\n\n```shell\nyarn add -D @electron-forge/cli\n#  then\nnpx electron-forge import\n\n#  ******* Using npm *******\nnpm install --save-dev @electron-forge/cli\nnpx electron-forge import\n```\n\nOutput:\n\n```shell\n✔ Checking your system\n✔ Initializing Git Repository\n✔ Writing modified package.json file\n✔ Installing dependencies\n✔ Writing modified package.json file\n✔ Fixing .gitignore\n\n\nWe have ATTEMPTED to convert your app to be in a format that electron-forge understands.\n\nThanks for using Electron Forge!!!\n```\n\n\u003e Secondly we need to create a distributable using electron-forge as follows\n\n```shell\nyarn run make\n\n# or with npm\n\nnpm run make\n```\n\nOutput:\n\n```shell\n$ electron-forge make\n✔ Checking your system\n✔ Resolving Forge Config\nWe need to package your application before we can make it\n✔ Preparing to Package Application for arch: x64\n✔ Preparing native dependencies\n✔ Packaging Application\nMaking for the following targets: squirrel\n✔ Making for target: squirrel - On platform: win32 - For arch: x64\nDone in 134.93s.\n```\n\nElectron Forge creates the `out` folder where your package will be located:\n\nFolder Structures of the `out` folder:\n\n```shell\nC:.\n├───00_GET_STARTED-win32-x64\n│   ├───locales\n│   └───resources\n│       └───app\n│           ├───node_modules\n│           │   ├───@electron\n│           │   ├───@electron-forge\n│           │   ├───@gar\n│           │   ├───@malept\n│           │   ├───@nodelib\n│           │   ├───@npmcli\n│           │   ├───@sindresorhus\n│           │   ├───@szmarczak\n│           │   ├───@tootallnate\n│           │   ├───@types\n│           │   └───electron-squirrel-startup\n│           │       ├───node_modules\n│           │       │   ├───debug\n│           │       │   │   └───src\n│           │       │   └───ms\n│           │       └───test\n│           └───src\n│               ├───public\n│               ├───scripts\n│               └───styles\n└───make\n    └───squirrel.windows\n        └───x64\n```\n\n### Refs\n\n1. [www.electronjs.org](https://www.electronjs.org/docs/latest/tutorial/quick-start)\n2. [www.electronforge.io](https://www.electronforge.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrispengari%2Felectron-startup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrispengari%2Felectron-startup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrispengari%2Felectron-startup/lists"}