{"id":19261909,"url":"https://github.com/hacksu/electron-basics","last_synced_at":"2026-06-10T21:31:15.053Z","repository":{"id":90185071,"uuid":"124126154","full_name":"hacksu/electron-basics","owner":"hacksu","description":"Learn the basics of electron with this Slackamole tutorial!","archived":false,"fork":false,"pushed_at":"2018-03-06T23:46:47.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-23T18:44:17.570Z","etag":null,"topics":["advanced","lesson"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hacksu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2018-03-06T19:12:26.000Z","updated_at":"2020-02-23T21:45:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"c7ceffbf-b120-456d-bfc1-a3d1e8ede5a2","html_url":"https://github.com/hacksu/electron-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hacksu/electron-basics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2Felectron-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2Felectron-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2Felectron-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2Felectron-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hacksu","download_url":"https://codeload.github.com/hacksu/electron-basics/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2Felectron-basics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34172196,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"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":["advanced","lesson"],"created_at":"2024-11-09T19:28:56.601Z","updated_at":"2026-06-10T21:31:14.661Z","avatar_url":"https://github.com/hacksu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Electron Basics\n\n## What Is Electron?\n\nElectronJS is a framework for making desktop applications with webdev tools - Javascript, HTML, and CSS. It provides a bunch of cool functionality that you wouldn't have on a webapp, like offline functionality, dynamic windows, access to some of your system's tools, and more!\n\n## Requirements\n\nElectron runs on Node, which you can download [here](https://nodejs.org/en/). \n\nYou'll also need a code text editor, I recommend [Brackets](http://brackets.io/) or [Atom](https://atom.io/). \n\nLast but not least, you need access to your command line. \n\n## Step 1: Setting Up Our Project\n\nFirst, we need to set up a folder to do our project. Open up the terminal, navigate to where you want the project, and type: \n\n`mkdir my-electron-project` -- or whatever you want to call your project\n\n`cd my-electron-project` to go into the folder\n\n`npm init` to initialize it as a node project. \n\nYou should then be prompted for your node settings -- if you get an error, make sure you have node installed. You can just press enter through the entire thing, if you want.\n\nNow, enter `npm install electron --save`.  We only installed Node, so now we're installing Electron via the Node Package Manager (NPM).\n\nNext, open up the folder we just made -- `my-electron-project` -- in your favorite text editor!\n\n## Step 2: Configuring Node\n\nNPM gave us three things: `package.json`, `package-lock.json`, and a folder called `node_modules`. The only one we'll be looking at is `package.json` -- open that file up!\n\nThe two main things we have to look at are the value for `\"main\"`, which might be `index.js` by default, and the `\"scripts\"` object.\n\nChange the `\"main\"` value to `\"main.js\"`. This means we're going to need to make a new file called main.js, and that's where Node will look as the default file to run when we run the program.\n\nNext, find the `\"scripts\"` object and add `\"start\": \"electron .\"`. This will let us run our electron app with the command `npm start`.\n\nYour package.json should look like this: \n\n```\n{\n  \"name\": \"my-electron-project\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"main.js\",\n  \"scripts\": {\n    \"start\": \"electron .\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"electron\": \"^1.8.3\"\n  }\n}\n```\n\n## Step 3: Launching our App\n\nHere's where we can finally code our app!\n\nWe need two new files: first, `index.html`, which is going to store the html for our app. Inside our index.html, we're going to write this:\n\n```\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eSlack-a-mole!\u003c/title\u003e\n    \u003c!--\n    The below tags are references to a css file and a js file we haven't made yet.\n    Uncomment this and delete this text once you have those two files!\n    \u003clink href=\"style.css\" rel=\"stylesheet\"\u003e\n    \u003cscript src=\"functions.js\"\u003e\u003c/script\u003e\n    --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n  \u003c!-- We might use this later\n    \u003cdiv id=\"sidebar\"\u003e\n      \u003cdiv class=\"sidebarHead\"\u003eSlack Channel\u003c/div\u003e\n      \u003cdiv class=\"opt\"\u003e# bread\u003c/div\u003e\n      \u003cdiv class=\"opt\"\u003e# pond\u003c/div\u003e\n      \u003cdiv class=\"opt\"\u003e# general\u003c/div\u003e\n      \u003cdiv class=\"opt\"\u003e# random\u003c/div\u003e\n    \u003c/div\u003e --\u003e\n    \u003cdiv id=\"mainContent\"\u003e\n      \u003ch1\u003eWow! Welcome to my first spankin app!\u003c/h1\u003e\n      \u003cp\u003eThanks for droppin by!\u003c/p\u003e\n      \u003cbutton onclick=\"newWindow()\"\u003eNew Window\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\nSave that sucker. We'll play with it later.\n\nNext, make `main.js`. This is going to have the code to start our application. Here's what will be inside our main.js:\n\n```\nconst {app, BrowserWindow} = require('electron');\nconst path = require('path');\nconst url = require('url');\n\nlet win;\n\nfunction createWindow () {\n  win = new BrowserWindow({width: 800, height: 600});\n  \n  win.loadURL(url.format({\n      pathname: path.join(__dirname, 'index.html'),\n      protocol: 'file:',\n      slashes: true\n    }));\n  \n  win.on('closed', () =\u003e {\n      win = null\n    })\n}\n  \napp.on('ready', createWindow);\n\n  app.on('window-all-closed', () =\u003e {\n    if (process.platform !== 'darwin') {\n      app.quit()\n    }\n  })\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 (win === null) {\n      createWindow()\n    }\n  })\n\n```\n\nFinally, go back to our command line, and type `npm start`. Hopefully, we should have our app pop up now!\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Felectron-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhacksu%2Felectron-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Felectron-basics/lists"}