{"id":19932194,"url":"https://github.com/fliegwerk/electron-react-boilerplate","last_synced_at":"2025-05-03T11:31:38.528Z","repository":{"id":37955890,"uuid":"317949961","full_name":"fliegwerk/electron-react-boilerplate","owner":"fliegwerk","description":"A boilerplate to develop an electron application with react in a simple manner","archived":false,"fork":false,"pushed_at":"2023-05-01T19:00:15.000Z","size":13499,"stargazers_count":8,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-28T22:18:01.161Z","etag":null,"topics":["boilerplate","electron","react","typescript"],"latest_commit_sha":null,"homepage":"","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/fliegwerk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-12-02T18:08:03.000Z","updated_at":"2023-02-24T18:54:30.000Z","dependencies_parsed_at":"2023-02-13T01:46:02.949Z","dependency_job_id":null,"html_url":"https://github.com/fliegwerk/electron-react-boilerplate","commit_stats":null,"previous_names":[],"tags_count":8,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fliegwerk%2Felectron-react-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fliegwerk%2Felectron-react-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fliegwerk%2Felectron-react-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fliegwerk%2Felectron-react-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fliegwerk","download_url":"https://codeload.github.com/fliegwerk/electron-react-boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224360230,"owners_count":17298319,"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":["boilerplate","electron","react","typescript"],"created_at":"2024-11-12T23:09:21.110Z","updated_at":"2024-11-12T23:09:21.706Z","avatar_url":"https://github.com/fliegwerk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\u003cimg src=\"./branding/logos/v1@2x.png\" alt=\"electron-react-boilerplate: React + Electron + TypeScript\"\u003e\u003c/p\u003e\n\n# Another Electron React Boilerplate with Typescript Support\n\n[![Build status](https://img.shields.io/github/workflow/status/fliegwerk/electron-react-boilerplate/CI)](https://github.com/fliegwerk/electron-react-boilerplate/actions?query=workflow%3ACI)\n[![License](https://img.shields.io/github/license/fliegwerk/electron-react-boilerplate)](https://github.com/fliegwerk/electron-react-boilerplate)\n![Project version](https://img.shields.io/github/package-json/v/fliegwerk/electron-react-boilerplate)\n![React dependency version](https://img.shields.io/github/package-json/dependency-version/fliegwerk/electron-react-boilerplate/dev/react)\n![react-scripts dependency version](https://img.shields.io/github/package-json/dependency-version/fliegwerk/electron-react-boilerplate/dev/react-scripts)\n![Electron dependency version](https://img.shields.io/github/package-json/dependency-version/fliegwerk/electron-react-boilerplate/dev/electron)\n![Typescript dependency version](https://img.shields.io/github/package-json/dependency-version/fliegwerk/electron-react-boilerplate/dev/typescript)\n\n[![Built using electron react boilerplate](https://img.shields.io/static/v1?label=Built%20using\u0026message=electron-react-boilerplate\u0026labelColor=2B2E3A\u0026color=61DAFB)](https://github.com/fliegwerk/electron-react-boilerplate)\n\nA boilerplate to develop an electron application with react in a simple manner\n\n## Introduction\n\nThis project integrates a React application in an Electron container\nwith build and package support written in Typescript.\\\nA minimal set of dependencies allows for easy updates and maintenance.\\\nIt is set up and written as simple as possible\nso everyone can understand and configure the boilerplate code for their needs.\n\n## Getting Started\n\nFirst, create a new repository from the GitHub web interface\nor clone the project and manually integrate the changes into your own project.\n\nAfter you have initialized the project, install the development dependencies with:\n\n```\nnpm ci\n```\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nCompiles the main process script and starts the react-scripts development server.\\\nAfter the first compilation, it opens an electron window with the rendered content.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\\\nAdditionally, it builds the \"main\" electron process scripts next to the webpage build.\n\nThe build is minified, and the filenames include the hashes.\n\n### `npm run package`\n\nBuilds the app described in the `npm run build` step and creates packages for different operating systems.\n\nIf you want to package for only one operating system, call:\n\n```\nnpm run package:linux  # for linux operating systems\nnpm run package:win    # for windows operating systems\nnpm run package:mac    # for macOS operating systems\n```\n\nLook at the `build` property in the `package.json` if you want to configure the packaging process.\\\nThe script calls the [electron-builder](https://www.electron.build/), which reads this property from the `package.json`.\n\nTo configure electron-builder, take a look at their [documentation](https://www.electron.build/configuration/configuration).\n\n### `npm run style`\n\nStyles and formats all project files with the defined code style.\n\nIt uses [Prettier](https://prettier.io/), an opportunistic code formatter, configured via the `.prettierrc.js` file.\n\nPlease also take a look at the `.editorconfig`, which defines the default formatting in your editor.\\\nFor more information, take a look at their [landing page](https://editorconfig.org/).\n\n### `npm run lint`\n\nChecks the syntax of the source code with [ESLint](https://eslint.org/).\n\nESLint can be configured through the property `eslintConfig` in the `package.json`.\n\n## Adding dependencies\n\nAdd dependencies is a simple task.\\\nIf you need the dependency only on the React app, install it as a development dependency:\n\n```\nnpm install --save-dev new-renderer-dep\n```\n\nIf you need the dependency also in the process scripts, install it as a normal project dependency:\n\n```\nnpm install new-main-dep\n```\n\nThis is needed because electron-builder will bundle all normal project dependencies\nnext to the packaged application's `build` folder.\nThe react-scripts builder integrates all imported dependencies directly into the `build` folder.\n\n## Publishing\n\nWhen you want to create a new release, follow these steps:\n\n1. Bump the version in the `package.json` `version` field based on the changes (for example, from `1.1.2` to `1.2.0`)\n2. Commit this change:\n   ```\n   git commit -am \"Bump package version (v1.2.0)\"\n   ```\n3. Tag the created commit:\n   ```\n   git tag v1.2.0\n   ```\n   Make sure the tag name's format follows the structure `vX.X.X`. (because the release workflow will detect the git tag)\n4. Push the change and the git tag to the GitHub repository:\n   ```\n   git push \u0026\u0026 git push --tag\n   ```\n\n## Further information\n\nThe boilerplate has a [Wiki](https://github.com/fliegwerk/electron-react-boilerplate/wiki)\nwhich describes toolchains, commands and recipes more in-depth.\n\nIf you have any questions,\nplease first take a look at the [FAQ](https://github.com/fliegwerk/electron-react-boilerplate/wiki/FAQ).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n## Project structure\n\n```yaml\nroot:\n  - .github    # github related files like workflows, issue templates, configurations, ...\n  - build      # the build output of react-script builder and the main process script\n  - images     # images and branding for the project\n  - main       # here is the source code for the main process scripts\n    with:\n      - electron.ts  # main process script file - here you can configure the behavior of electron\n  - public     # template files, which will be copied to the build folder on the build step\n  - release    # here are the executables of the package step placed\n  - resources  # resource files like icons, logos, configuration files for the electron-builder\n  - src        # the development root the React app\n    with:\n      - assets      # non-source files like multimedia, binary blobs, compiled parts, ...\n      - components  # React components\n      - hooks       # React hooks\n      - lib         # generic libraries like converters, connectors, or utility functions\n      - model       # global Typescript definitions used in the project (you can also access these types in the main process scripts)\n      - index.tsx   # the root of the React app\n  - .editorconfig        # style and format definitions for your IDE or code editor\n  - .prettieringore      # defines which files prettier does not change (like a .gitignore for git repos)\n  - .prettierrc.js       # style and format definitions for prettier\n  - package.json         # main project information source - here are all project-related things defined (like name, dependencies, build, ...)\n  - package-lock.json    # detailed information about the installed dependencies and their relation to each other\n  - tsconfig.json        # the Typescript configuration file for the React app and their builder\n  - tsconfig.main.json   # the Typescript configuration file for the build of main process scripts of electron\n  - webpack.main.js      # the configuration file for webpack compiling the main electron process script\n  - webpack.preload.js   # the configuration file for webpack compiling the preload script for browser windows\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffliegwerk%2Felectron-react-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffliegwerk%2Felectron-react-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffliegwerk%2Felectron-react-boilerplate/lists"}