{"id":22882591,"url":"https://github.com/nxroot/electron-multiple-windows","last_synced_at":"2025-03-31T16:38:25.864Z","repository":{"id":107114988,"uuid":"576437834","full_name":"NxRoot/electron-multiple-windows","owner":"NxRoot","description":"Example of electron app with multiple windows.","archived":false,"fork":false,"pushed_at":"2022-12-10T01:26:13.000Z","size":270,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-06T21:46:23.124Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/NxRoot.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":"2022-12-09T21:32:31.000Z","updated_at":"2023-04-29T15:43:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"4d94bad1-8976-4b0c-b448-ca8f705e976f","html_url":"https://github.com/NxRoot/electron-multiple-windows","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/NxRoot%2Felectron-multiple-windows","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NxRoot%2Felectron-multiple-windows/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NxRoot%2Felectron-multiple-windows/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NxRoot%2Felectron-multiple-windows/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NxRoot","download_url":"https://codeload.github.com/NxRoot/electron-multiple-windows/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246499325,"owners_count":20787483,"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":[],"created_at":"2024-12-13T18:18:30.387Z","updated_at":"2025-03-31T16:38:25.858Z","avatar_url":"https://github.com/NxRoot.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Electron Multiple Windows \nExample of electron app with multiple windows.\n\n## Description\n* This example was inspired by [this issue](https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/623), and an [old approach](https://medium.com/@ZoeDreams/multiple-electron-windows-using-a-view-manager-and-react-js-6d8b1e209faf) from 2017.\n* Bundles are now handled individually, instead of duplicating the entire bundle.\n* Redirection is done with [@electron-forge/plugin-webpack](https://www.electronforge.io/config/plugins/webpack) entrypoints, instead of react-router.\n* We also use [electron-forge](https://www.electronforge.io/) to package our application.\n\n## How does it work\n### The real magic happens in the webpack entrypoints:\n\n```js\n\"plugins\": [\n  [\n    \"@electron-forge/plugin-webpack\",\n    {\n      \"mainConfig\": \"./webpack.main.config.js\",\n      \"renderer\": {\n        \"config\": \"./webpack.renderer.config.js\",\n        \"entryPoints\": [\n          {\n            \"html\": \"./src/windows/index.html\",\n            \"js\": \"./src/windows/home/index.tsx\",   // Window 1\n            \"name\": \"main_window\"\n          },\n          {\n            \"html\": \"./src/windows/index.html\",\n            \"js\": \"./src/windows/other/index.tsx\",  // Window 2\n            \"name\": \"other\"\n          }\n        ]\n      }\n    }\n  ]\n]\n```\nAs you can see the `html` index is always the same, but the `js` bundles are poiting to different locations.\n\n### Main Process\n\nEach entry point has two globals defined based on the name assigned to your entry point:\n* The renderer's entry point will be suffixed with _WEBPACK_ENTRY.\n* The renderer's preload script will be suffixed with _PRELOAD_WEBPACK_ENTRY\n```ts\n// Window 1\ndeclare const MAIN_WINDOW_WEBPACK_ENTRY: string;\ndeclare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;\n// Window 2\ndeclare const OTHER_WEBPACK_ENTRY: string;\ndeclare const OTHER_PRELOAD_WEBPACK_ENTRY: string;\n```\n\n## How to manage shared imports\nYou probably want to share **styles** or **providers** across all your windows:\n\n\u003cimg src=\"https://i.ibb.co/V32QRdZ/indexmodules.png\" style=\"width: 200px\" alt=\"Alt text\" title=\"Optional title\"\u003e\n\n\u003e The default `index.tsx` is always the top level of your application where you can wrap providers.\n\n**Component imports are managed **automatically** by webpack configuration.** (Each bundle requires used imports only)\n\n\n# Available Scripts\n\nIn the project directory, you can run:\n\n### Starting\n\n### `npm start`\n\nRuns the app in the development mode.\n\n### Building\n\n### `npm run make`\n\nSo you've got an amazing application there, and you want to package it all up and share it with the world. If you run the make script, Electron Forge will generate you platform specific distributables for you to share with everyone.\n\n### Publishing\n\n### `npm run publish`\n\nNow you have distributables that you can share with your users. If you run the publish script, Electron Forge will then publish the platform-specific distributables for you, using the publishing method of your choice.\n\n## Learn More\n\nYou can learn more in the [Electron-Forge documentation](https://www.electronforge.io/).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnxroot%2Felectron-multiple-windows","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnxroot%2Felectron-multiple-windows","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnxroot%2Felectron-multiple-windows/lists"}