{"id":19895528,"url":"https://github.com/miniak/react-electron-workshop","last_synced_at":"2025-05-02T20:30:57.756Z","repository":{"id":143483516,"uuid":"155341286","full_name":"miniak/react-electron-workshop","owner":"miniak","description":null,"archived":false,"fork":false,"pushed_at":"2018-11-01T09:40:58.000Z","size":81,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-07T05:12:04.570Z","etag":null,"topics":["electron","react","typescript"],"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/miniak.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-10-30T07:18:50.000Z","updated_at":"2022-09-07T19:10:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"f8a91b52-ce92-4245-91a2-2b060073e486","html_url":"https://github.com/miniak/react-electron-workshop","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/miniak%2Freact-electron-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miniak%2Freact-electron-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miniak%2Freact-electron-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miniak%2Freact-electron-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miniak","download_url":"https://codeload.github.com/miniak/react-electron-workshop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252104054,"owners_count":21695407,"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":["electron","react","typescript"],"created_at":"2024-11-12T18:36:58.788Z","updated_at":"2025-05-02T20:30:57.750Z","avatar_url":"https://github.com/miniak.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-electron-workshop\n\nThis repo contains a [react](https://reactjs.org/) [electron](https://electronjs.org/) sample app that we used for a workshop on building react desktop apps with electron. It is a simple app to view photos stored locally on your computer. We use [typescript]( https://www.typescriptlang.org/) because things normally work out better that way.\n\n![Screenshot](elctron-photo-viewer.jpg)\n\n## To Use\nTo clone and run this repository, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:\n\n```\n# Clone this repository\ngit clone https://github.com/miniak/react-electron-workshop.git\n# Go into the repository\ncd react-electron-workshop\n# Install dependencies\nnpm install\n# Build\nnpm run build\n# Run the app\nnpm start\n```\n\n## To make this app step by step\n\nFor development we use [vscode](https://code.visualstudio.com/), [Git](https://git-scm.com), [Node.js](https://nodejs.org/en/download/) and [electron-fiddle](https://github.com/electron/fiddle).\n\n### Creating hello world with react, typescript and electron\n\n * create empty folder: ```mkdir react-photo-viewer``` \n * go into the folder: ```cd react-photo-viewer``` \n * Initialize npm: ```npm init```\n * Install electron: ```npm install --save-dev electron```\n * Install react: ```npm install --save react react-dom```\n * Install typescript: ```npm install --save-dev typescript @types/react @types/react-dom```\n * Create [.gitignore](.gitignore) ```git init``` (optional) \n * Create [tsconfig.json](tsconfig.json)\n * Create src folder: ```mkdir src```\n * In the src folder: Create [main.ts](src/main.ts)\n * Create renderer folder: ```mkdir src/renderer```\n * In the src\\renderer folder:\n    * Add [preload.ts](src/renderer/preload.ts)\n    * Add [index.html](src/renderer/index.html)\n    * Add [index.tsx](https://github.com/miniak/react-electron-workshop/blob/1314f9d2a09ebeded0040b1b8a23e9e083e04235/src/renderer/index.tsx) (hello world version)\n    * Add [index.css](src/renderer/index.css) for styles\n * Edit [package.json](package.json) to add build steps and update main ```\"main\": \"src/main.js\",```\n * Try to build: ```npm run build```\n * Try to run: ```npm start```\n * :bulb: Try to inspect and debug the render process using developer-tools: \u003ckbd\u003econtrol\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eI\u003c/kbd\u003e\n * :bulb: Try to inspect and [debug the main process](https://electronjs.org/docs/tutorial/debugging-main-process) using chrome://inspect in a seperate chrome instance.\n \n ### Add photo viewing features\n \n * Upgrade [index.tsx](https://github.com/miniak/react-electron-workshop/blob/9876e93bbf3aa0185d3ab6933ea6028fa04a710b/src/renderer/index.tsx) with basic viewer ([diff](https://github.com/miniak/react-electron-workshop/commit/9876e93bbf3aa0185d3ab6933ea6028fa04a710b))\n  * :bulb: Note the use of ```remote.app.getPath('pictures')``` and ```fs.readdirSync``` electron api's. This API is only available in the main process – so we access it via [remote](https://github.com/electron/electron/blob/master/docs/api/remote.md).\n \n ### Directory selection\n * Upgrade [index.tsx](https://github.com/miniak/react-electron-workshop/blob/4dd866f7850236b8881abbc998fda1f6fd0f1965/src/renderer/index.tsx) with context menu and thumbnail optimizing ([diff](https://github.com/miniak/react-electron-workshop/commit/4dd866f7850236b8881abbc998fda1f6fd0f1965))\n * :runner: build and run: ```npm run build \u0026\u0026 npm start```\n \n ### Add context menu \n * Upgrade [index.tsx](https://github.com/miniak/react-electron-workshop/blob/b3063bf1b1c00cc9fe31e773bf24a27e2d53324d/src/renderer/index.tsx) with context menu and thumbnail optimizing ([diff](https://github.com/miniak/react-electron-workshop/commit/b3063bf1b1c00cc9fe31e773bf24a27e2d53324d))\n * :bulb: Note the use of ```remote.Menu.buildFromTemplate``` electron menu api.\n * :runner: build and run: ```npm run build \u0026\u0026 npm start```\n \n ### Add exif info\n * Install exif module ```npm install --save exif```\n * Add [popup.html](src/renderer/popup.html) and [popup.tsx](src/renderer/popup.tsx) to display exif info\n * Upgrade [index.tsx](src/renderer/index.tsx) to show exif info ([diff](https://github.com/miniak/react-electron-workshop/commit/19c95f489060a2bd689f55221158620a72094a82))\n * :runner: build and run: ```npm run build \u0026\u0026 npm start```\n * :bulb: notice an additional rendering process when the exif popup is visible\n \n### Packaging the app\n * An app package can be made by just [copying folders](https://electronjs.org/docs/tutorial/application-distribution)\n * But there are packages [packages to do this](https://github.com/electron-userland/electron-packager): ```npm install --save-dev electron-packager```\n * Create the packaged app: ```node_modules\\.bin\\electron-packager.cmd ./```\n * :bulb: Review the created packaged app folder. Run the packaged app, note it has no native menu. The menu came from the [default app](https://github.com/electron/electron/blob/master/default_app/menu.js).\n \n ### Creating an installer on Windows\n * Install a package to [create an installer](https://github.com/felixrieseberg/electron-wix-msi): ```npm i --save-dev electron-wix-msi```\n * Install [wix toolset](http://wixtoolset.org/)\n * Add wix to the path  ```C:\\Program Files (x86)\\WiX Toolset v3.11\\bin;```\n * Create [make-msi.js](make-msi.js) with script to create an insaller\n * Build the installer: ```node make-msi.js```\n * :bulb: Install and run\n \n ### Tips\n  * Read the [security guide](https://electronjs.org/docs/tutorial/security) **IMPORTANT**\n  * We didn't cover [Native Node Modules](https://electronjs.org/docs/tutorial/using-native-node-modules). They provide full access to the native platform – for when electron does not have an api.\n  * Electron processes communicate using [IPC](https://electronjs.org/docs/api/ipc-main). It is good to understand potential performance implications.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminiak%2Freact-electron-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminiak%2Freact-electron-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminiak%2Freact-electron-workshop/lists"}