{"id":24244441,"url":"https://github.com/szybkisasza/gdg-react-workshop","last_synced_at":"2025-08-06T23:50:32.963Z","repository":{"id":37214149,"uuid":"159995068","full_name":"SzybkiSasza/gdg-react-workshop","owner":"SzybkiSasza","description":"React + Electron + Typescript workshop for GDG DevFest Warsaw 👩‍💻👨‍💻🤖💻","archived":false,"fork":false,"pushed_at":"2023-01-06T01:58:55.000Z","size":7018,"stargazers_count":17,"open_issues_count":20,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-29T19:05:34.280Z","etag":null,"topics":["electron","gdg","javascript","material-ui","nodejs","react","toolset","typescript","workshop"],"latest_commit_sha":null,"homepage":"https://szybkisasza.github.io/gdg-react-workshop/","language":"TypeScript","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/SzybkiSasza.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":"2018-12-01T23:02:51.000Z","updated_at":"2023-08-12T16:35:43.000Z","dependencies_parsed_at":"2023-02-05T02:16:06.705Z","dependency_job_id":null,"html_url":"https://github.com/SzybkiSasza/gdg-react-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/SzybkiSasza%2Fgdg-react-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SzybkiSasza%2Fgdg-react-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SzybkiSasza%2Fgdg-react-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SzybkiSasza%2Fgdg-react-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SzybkiSasza","download_url":"https://codeload.github.com/SzybkiSasza/gdg-react-workshop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233967481,"owners_count":18758626,"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","gdg","javascript","material-ui","nodejs","react","toolset","typescript","workshop"],"created_at":"2025-01-14T22:25:15.269Z","updated_at":"2025-01-14T22:25:15.997Z","avatar_url":"https://github.com/SzybkiSasza.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GDG-React-Workshop\n\nReact + Electron + Typescript workshop for GDG DevFest Warsaw 👩‍💻👨‍💻🤖💻\n\n## Getting started\n\nIn order to work with this repository, you must install:\n - `Git `\n - The latest stable version of `node` (available here: https://nodejs.org/en/) - or use `nvm`\n - `Yarn` for package management (available here: https://yarnpkg.com/en/docs/install)\n\n```sh\n$ git clone https://github.com/SzybkiSasza/GDG-React-Workshop.git\n$ cd GDG-React-Workshop\n$ yarn\n```\n\n## Toolset\n\nWe'll use following tools to build our core app:\n\n- NodeJS + Yarn\n- React + Jest\n- Material UI\n- Typescript\n\nThese tools will be used to build advanced features:\n- Electron\n- Electron-builder\n- Electron-packager\n- Foreman\n- Cross-Env\n\n## Goals\n\n1. Learn the toolset\n2. Understand principles behind basic React App\n3. Understand Create React App behaviour and tradeoffs\n4. Successfully use Typescript with React\n5. Wrap our app in Electron and display as native desktop app ***(optional - based on available time)***\n6. **DO NOT** eject Create React App in order to have it working with Electron\n\n## How does it work?\n\nThe configuration is rather complex. It can be split into a few separate parts:\n\n- Running only React part as a browser app\n- Running desktop in DEV mode/locally\n- Bundling a final desktop app as a standalone installer\n\n### Running React app as a standalone browser app\n\nIn order to just run a React part of the workshop, you can use `yarn start-react` script that will use\nReact Scripts (that are part of Create React App) to run the app - it's so simple!\n\n### Running React App from Electron with reload capabilities\n\nIf you want to see CRA with Electron in action, just run `yarn start` script. There are a few key\nevents that happen when you run that script (it's handled by the Foreman that reads from `Procfile` - check\nout this file!):\n\n- React Scripts start building app in watch mode (front end part of the app)\n- TypeScript compiler is ran in watch mode in order to prepare `main.js` file\n- Another TypeScript file is ran in order to bootstrap Electron itself, based on built `main.js` file\n\nAll of these in conjunction allow one to develop **desktop app using React** almost simultaneously.\nIt allows full hot reloading with one caveat: **whenever you change Electron part of the app, the window\nhas to be re-generated** (it will re-open once TypeScript compiler prepares new `main.js` file).\n\nAs Electron is essentially just a NodeJS wrapper that renders **any arbitrary HTML content** in headless\nbrowser windows, the ony thing you have to do to render any HTML app in Electron is to provide a correct\nURL - you can find the code that takes care of it in `src/electron/main.ts`.\n\nFor more details, check out `src/electron` folder, especially `connect-electron.ts` file that prepares\ninitial Electron launch based on React app state.\n\n### Bundling React App with Electron without ejecting\n\nIn order to bundle the React App in Electron, you can run `yarn dist` script. It performs three steps:\n\n1. Builds standard React app\n2. Builds Electron part of the code and puts it in `build/electron` directory\n3. Bundles Electron with built React app as a standalone installer\n\nIf the script is ran successfully, it'll create a set of files in `dist` directory, including app\ninstaller - just double-click it in order to have it installed and ran on your system. \n\n## Side note on building the app\n\nCurrently, the build pipeline supports only Windows. It should be possible to simply modify \nthe build script in order to have it working for Mac/*Nix systems.\n\n## Resources\n\n1. React\n    - [React docs](https://reactjs.org/)\n    - [React GH repo](https://github.com/facebook/react/)\n    - [CRA repo](https://github.com/facebook/create-react-app)\n    - [Learning React roadmap](https://medium.freecodecamp.org/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6)\n    - [Higher Order Components](https://hackernoon.com/code-reuse-using-higher-order-hoc-and-stateless-functional-components-in-react-and-react-native-6eeb503c665)\n2. Jest\n    - [Jest docs](https://jestjs.io/)\n    - [Jest repo](https://github.com/facebook/jest)\n    - [Testing React Best Practices](https://medium.com/selleo/testing-react-components-best-practices-2f77ac302d12)\n\n3. Material UI\n    - [Docs](https://material-ui.com/)\n4. Electron\n    - [Docs](https://electronjs.org/)\n    - [Basics of building cross-platform app](https://hackernoon.com/the-basics-of-building-a-cross-platform-desktop-application-with-electron-814306c22d76)\n    - [Essential Electron](https://jlord.us/essential-electron/)\n    - [Electron - the bad parts](https://hackernoon.com/electron-the-bad-parts-2b710c491547)\n    - [Building Electron App with CRA](https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszybkisasza%2Fgdg-react-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fszybkisasza%2Fgdg-react-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszybkisasza%2Fgdg-react-workshop/lists"}