{"id":21736426,"url":"https://github.com/kyza/electron-tutorial","last_synced_at":"2026-04-10T13:32:04.697Z","repository":{"id":37204599,"uuid":"199933657","full_name":"Kyza/Electron-Tutorial","owner":"Kyza","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-09T21:46:02.000Z","size":61650,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-11T22:34:55.482Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/Kyza.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}},"created_at":"2019-07-31T21:49:25.000Z","updated_at":"2019-08-10T18:01:06.000Z","dependencies_parsed_at":"2023-01-25T21:45:47.830Z","dependency_job_id":null,"html_url":"https://github.com/Kyza/Electron-Tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Kyza/Electron-Tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kyza%2FElectron-Tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kyza%2FElectron-Tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kyza%2FElectron-Tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kyza%2FElectron-Tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kyza","download_url":"https://codeload.github.com/Kyza/Electron-Tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kyza%2FElectron-Tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31645284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-11-26T05:18:58.908Z","updated_at":"2026-04-10T13:32:04.669Z","avatar_url":"https://github.com/Kyza.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Electron Tutorial\n\n- [Internal Instructions](#internal-instructions) (For if you can't run the app.)\n- [How To Run The App](#how-to-run-the-app)\n\n## Internal Instructions\n\n### Step 1\n\n#### Installation\n\n##### Installing Node.js\n\n[Install Node.js](https://nodejs.org/en/download/)\n\nNode.js is the framework for everything you do with Electron.\n\n`\"As an asynchronous event driven JavaScript runtime, Node is designed to build scalable network applications... ...many connections can be handled concurrently. Upon each connection the callback is fired, but if there is no work to be done, Node will sleep.\"`\n\nA package manager called NPM is installed along with Node.js, it is also required for this project.\n\nOnce you have installed the latest version of Node.js, proceed to installing Electron.\n\n##### Installing Electron\n\nElectron is what allows you to make the app window (or multiple windows).\n\n`\"Electron uses Chromium and Node.js so you can build your app with HTML, CSS, and JavaScript.\"`\n\nUsing NPM, install Electron the following way.\n\nYou are on \u003cspan class=\"windows\"\u003eWindows\u003c/span\u003e\u003cspan class=\"mac\"\u003emacOS\u003c/span\u003e\u003cspan class=\"linux\"\u003ea Linux based system\u003c/span\u003e, so you will open a \u003cspan class=\"windows\"\u003ecommand prompt\u003c/span\u003e\u003cspan class=\"mac\"\u003eterminal\u003c/span\u003e\u003cspan class=\"linux\"\u003eterminal\u003c/span\u003e and navigate to wherever you want to start your project like this.\n\n\u003ckbd class=\"bg-dark text-white\"\u003ecd path_to_folder\u003c/kbd\u003e\n\nThen, use this command to install Electron.\n\n\u003ckbd class=\"bg-dark text-white\"\u003enpm install electron --save-dev\u003c/kbd\u003e\n\nThis command utilizes the NPM package manager to install Electron in the currect directory.\n\nNext, run this command.\n\n\u003ckbd class=\"bg-dark text-white\"\u003enpm init\u003c/kbd\u003e\n\nThis will initialize your project's settings.\n\nYou don't need to change anything, you can press enter and accept all the default values.\n\nNow, open the file it created called \u003cspan class=\"text-primary\"\u003epackage.json\u003c/span\u003e.\n\nYou can remove this line...\n\n\u003ckbd class=\"bg-dark text-white\"\u003e\"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\"\u003c/kbd\u003e\n\n... and replace it with this...\n\n\u003ckbd class=\"bg-dark text-white\"\u003e\"start\": \"electron .\"\u003c/kbd\u003e\n\nYou just changed one of your project's settings.\n\nYou will get to run it soon enough, but first you have to tell the program what to do.\n\nCreate a new file in the same folder you were running the commands called \u003cspan class=\"text-primary\"\u003eindex.js\u003c/span\u003e.\n\nThis is the file that will start your whole app.\n\nNow open it up and paste this code inside.\n\n\u003cpre class=\"bg-dark text-white\"\u003econst { app, BrowserWindow } = require(\"electron\");\n\n// Keep a global reference of the window object, if you don't, the window will\n// be closed automatically when the JavaScript object is garbage collected.\nlet win;\n\nfunction createWindow () {\n\t// Create the browser window.\n\twin = new BrowserWindow({\n\t\twidth: 800,\n\t\theight: 600,\n\t\twebPreferences: {\n\t\t\tnodeIntegration: true\n\t\t}\n\t});\n\n\t// and load the index.html of the app.\n\twin.loadFile(\"index.html\");\n\n\t// Remove the windows menubar.\n\twin.setMenu(null);\n\n\t// Open the DevTools.\n\twin.webContents.openDevTools();\n\n\t// Emitted when the window is closed.\n\twin.on(\"closed\", () =\u003e {\n\t\t// Dereference the window object, usually you would store windows\n\t\t// in an array if your app supports multi windows, this is the time\n\t\t// when you should delete the corresponding element.\n\t\twin = null;\n\t});\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.on(\"ready\", createWindow);\n\n// Quit when all windows are closed.\napp.on(\"window-all-closed\", () =\u003e {\n\t// On macOS it is common for applications and their menu bar\n\t// to stay active until the user quits explicitly with Cmd + Q\n\tif (process.platform !== \"darwin\") {\n\t\tapp.quit();\n\t}\n});\n\napp.on(\"activate\", () =\u003e {\n\t// On macOS it's common to re-create a window in the app when the\n\t// dock icon is clicked and there are no other windows open.\n\tif (win === null) {\n\t\tcreateWindow();\n\t}\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.\u003c/pre\u003e\n\nMake sure you save the file.\n\nNext, create a file called \u003cspan class=\"text-primary\"\u003eindex.html\u003c/span\u003e and leave it blank for now.\n\nNow, back in your \u003cspan class=\"windows\"\u003ecommand prompt\u003c/span\u003e\u003cspan class=\"mac\"\u003eterminal\u003c/span\u003e\u003cspan class=\"linux\"\u003eterminal\u003c/span\u003e, run this command to start your project!\n\n\u003ckbd class=\"bg-dark text-white\"\u003enpm run start\u003c/kbd\u003e\n\n### Step 2\n\n#### Documentation\n\n##### Building A Custom Titlebar\n\nNow that you've finished setting up your project, here's the \u003ci\u003ereal\u003c/i\u003e challenge.\n\nUsing Electron's documentation, remove the BrowserWindow's title bar, making it a \u003cspan class=\"text-primary\"\u003eframeless window\u003c/span\u003e.\n\n[Open The Electron Docs](https://electronjs.org/docs/api/browser-window?q=titlebar#browserwindow)\n\nClick the button above to open the Electron BrowserWindow documentation.\n\nIn order to gather the information you need to remove the titlebar, you will have to read through the documentation and find the information you need.\n\nThe documentation may even tell you more information about what you are trying to do.\n\nOnce you have done that, you can create your own custom titlebar and style it however you want using your knowledge of CSS.\n\nOpen up your \u003cspan class=\"text-primary\"\u003eindex.html\u003c/span\u003e file and create a DIV that stretches all the way across the top of the window.\n\nYou can style this DIV however you want, just make sure it is visible.\n\nWhen you have done that, add the extra CSS styles \u003cspan class=\"text-primary\"\u003e-webkit-user-select: none;\u003c/span\u003e and \u003cspan class=\"text-primary\"\u003e-webkit-app-region: drag;\u003c/span\u003e to the DIV.\n\nThese styles will prevent the user from selecting any text inside of that DIV and make the DIV a part of the titlebar respectively.\n\nNow, if you run your project once more using the same command as before, you will be able to click and drag the DIV you added just like the built in window titlebar.\n\n[Open Stack Overflow](https://stackoverflow.com/questions/35876939/frameless-window-with-controls-in-electron-windows)\n\n## How To Run The App\n\n### You need [Node.js](https://nodejs.org/) to run this.\n\nTo run this tutorial, either clone the repository if you know how to, or download the repository.\n\nOnce you've done that, unzip the folder and open a command prompt or terminal and navigate to where you saved the repository like this:\n\n```\ncd path_to_folder\n```\n\nNext, run this command to start it.\n\n```\nnpm run start\n```\n\nIf you have any problems running this, please leave an [issue](https://github.com/KyzaGitHub/Electron-Tutorial/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyza%2Felectron-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyza%2Felectron-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyza%2Felectron-tutorial/lists"}