{"id":15667281,"url":"https://github.com/jubianchi/create-electron-app","last_synced_at":"2026-01-28T20:39:06.870Z","repository":{"id":36514696,"uuid":"146514336","full_name":"jubianchi/create-electron-app","owner":"jubianchi","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-26T08:10:16.000Z","size":2033,"stargazers_count":2,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-08T03:29:50.488Z","etag":null,"topics":["bootstrap","electron","enzyme","hmr","jest","react","redux","sass","spectron","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/jubianchi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["jubianchi"]}},"created_at":"2018-08-28T22:37:01.000Z","updated_at":"2023-02-02T09:16:59.000Z","dependencies_parsed_at":"2023-01-17T02:13:23.892Z","dependency_job_id":null,"html_url":"https://github.com/jubianchi/create-electron-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jubianchi/create-electron-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jubianchi%2Fcreate-electron-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jubianchi%2Fcreate-electron-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jubianchi%2Fcreate-electron-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jubianchi%2Fcreate-electron-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jubianchi","download_url":"https://codeload.github.com/jubianchi/create-electron-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jubianchi%2Fcreate-electron-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28851081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"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":["bootstrap","electron","enzyme","hmr","jest","react","redux","sass","spectron","webpack"],"created_at":"2024-10-03T14:02:06.647Z","updated_at":"2026-01-28T20:39:06.852Z","avatar_url":"https://github.com/jubianchi.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jubianchi"],"categories":[],"sub_categories":[],"readme":"# create-electron-app\n\n![CI](https://github.com/jubianchi/create-electron-app/workflows/CI/badge.svg?branch=master)\n\n![Logo](resources/logo.png)\n\n## 🤔 Why?\n\n-   Security best practices\n\n-   [`create-react-app`](https://github.com/facebook/create-react-app)\n-   [`electron-react-boilerplate`](https://github.com/chentsulin/electron-react-boilerplate)\n\nIf we were to talk using `create-react-app` words we could say that with `createa-electron-app` you get a pre-ejected\nenvironment meaning you will have full-control over the configuration of each tool OOTB.\n\n### Best practices\n\n#### React Strict Mode\n\nWe enabled React [Strict Mode](https://reactjs.org/docs/strict-mode.html) to warn you about potential problems in your\napplication. We want you to be able to build the best possible app and also make any future update of dependencies easy.\nWhen React will be ready for async rendering, you'll be happy to have every warnings already fixed and be ready to upgrade.\n\n## 🏁 Initialize\n\n```shell\nnpm init jubianchi/electron-app \u003ctarget-directory\u003e\n```\n\n## 💻 Develop\n\n`create-electron-app` will initialize a bunch of scripts for you:\n\n-   `start`: starts a local development environment using webpack development server.\n\n### Environment\n\n#### Redux\n\nBecause Electron architecture is a bit special (i.e it uses two processes, the main and the renderer) we configured Redux\nto take advantage of this specificity.\n\nThe store is configured on the main process side and replicated on the renderer side. This is done using a middleware which\nrole is to forward actions from the main process to renderer processes and from renderer processes to the main process.\nThis allows us to:\n\n-   dispatch actions from the main process and have the renderer processes updated;\n-   dispatch actions from the renderer processes and have the main and other renderer processes updated.\n\nHere is how it looks like:\n\n```\n         +-------------------------------------------------------+\n         |                                                       |\n         |                                                       |\n+-------------------------------------------------+     +-------------------------------------------------+\n|        |                                        |     |        |                                        |\n|        |          MAIN PROCESS                  |     |        |       RENDERER PROCESSES               |\n|        |                                        |     |        |                                        |\n|  +-----+------+     +----------+     +-------+  |     |  +-----v------+     +----------+     +-------+  |\n|  |            |     |          |     |       |  |     |  |            |     |          |     |       |  |\n|  | DISPATCHER +-----\u003e REDUCERS +-----\u003e STORE |  |     |  | DISPATCHER +-----\u003e REDUCERS +-----\u003e STORE |  |\n|  |            |     |          |     |       |  |     |  |            |     |          |     |       |  |\n|  +-----^------+     +----------+     +-------+  |     |  +-----+------+     +----------+     +-------+  |\n|        |                                        |     |        |                                        |\n+-------------------------------------------------+     +-------------------------------------------------+\n         |                                                       |\n         |                                                       |\n         +-------------------------------------------------------+\n```\n\nThis is fairly simple, the middleware uses IPC to send actions to other processes. Because of this, actions have to be\nserializable to be handled correctly by the IPC channel.\n\nSometimes, it might be usefull to not forward actions sent from the main or renderer processes. To do so, you can add a\n`local` property with the value `true` to your actions. When the middleware finds this property (and if it is `false`) it\nwon't forward the action.\n\nWhen a renderer process receives an action forwarder by the main process from another renderer process, a `sender` property\nis added. It contains the [identifier](https://electronjs.org/docs/api/web-contents#contentsid) of the emitter process [`webContents`](https://electronjs.org/docs/api/web-contents).\n\n### Directory structure\n\nOnce initialized, your workspace will look like this:\n\n```\n├── config\n├── resources\n└── src\n    ├── main\n    ├── renderer\n    └── shared\n\n9 directories\n```\n\nThe directory structure is pretty simple and should cover all your needs:\n\n-   [`config/`](config/) contains the configuration files used by the development tools (Webpack, Jest, ...);\n-   [`resources/`](resources/) actually only contains an image used to build the MacOS DMG. You'll be able to use this directory as you like;\n-   [`src/main/`](src/main/) contains the source files for the main process;\n-   [`src/renderer/`](src/renderer/) contains the source files for the renderer process;\n-   [`src/shared/`](src/shared/) contains the source files shared between the main and renderer process.\n\nYou are free to edit any of the files inside any directory but keep in mind that, the more you change the contents of\nconfiguration files the harder it will be to update to future `create-electron-app` releases.\n\nNote that the [`src/shared/`](src/shared/) directory is aliased to `@shared` to ease importing files from it.\n\n### Adding a Chrome extension\n\n`create-electron-app` automatically installs some developer extensions by default. Sometimes you will want to add other\nextensions. Let's say you want to enable [`react-perf-devtool`](https://github.com/nitin42/react-perf-devtool).\n\nThe first thing to to is to find the extension in the\n[Chrome Web Store](https://chrome.google.com/webstore/category/extensions). `react-perf-devtool` is here:\n`https://chrome.google.com/webstore/detail/react-performance-devtool/fcombecpigkkfcbfaeikoeegkmkjfbfm`. Once you have\nthe extension's URL, find the extension's ID (the last part of the URL). In our case, it is\n`fcombecpigkkfcbfaeikoeegkmkjfbfm`.\n\nNow you can open the [`src/main/index.js`](src/main/index.js) to apply the required changes:\n\n```diff\n  try {\n      installExtension([\n          REACT_PERF,\n          REACT_DEVELOPER_TOOLS,\n          REDUX_DEVTOOLS,\n+         { id: 'fcombecpigkkfcbfaeikoeegkmkjfbfm', electron: process.versions.electron },\n      ])\n          .then(name =\u003e console.log(`Added Extension:  ${name}`))\n          .catch(err =\u003e console.log('An error occurred: ', err));\n  } catch (err) {}\n```\n\nSome extensions also require you to apply changes to the renderer part. `react-perf-devtool` is one of those. Be\nsure to read the extension's documentation. For the record, here is how you would enable `react-perf-devtool` on the\nrenderer side, in the [`src/renderer/index.js`](src/renderer/index.js) file:\n\n```diff\n  import reducers from 'shared/reducers';\n+ import { registerObserver } from 'react-perf-devtool';\n\n+ registerObserver();\n\n  const store = createStore(reducers);\n```\n\n## 🎯 Test\n\n`create-electron-app` will setup three [Jest](https://jestjs.io/) test suites:\n\n-   one for the main process using [Spectron](https://electronjs.org/spectron);\n-   one for the renderer processes using [Enzyme](https://airbnb.io/enzyme/);\n-   one for the shared library using only Jest.\n\nEach test suite will produce its own coverage report in the [`coverage/`](coverage/) directory.\n\n### Scripts\n\nYou'll be able to execute the test suites using the `npm test` command but you can also run them separately:\n\n-   `test:main` to run the main process test suite. Before you run this script, be sure to run the `build:test` script before;\n-   `test:renderer` to run the renderer processes test suite;\n-   `test:shared` to run the shared library test suite.\n\nThanks to NPM, it's possible to set additional flags when running these scripts. For example, if you are actively working\non the React part (the renderer) you can run:\n\n```shell\nnpm run test:main -- --watch\n```\n\nWe are adding the `--watch` flag which will be passed to Jest. Your tests will now be executed when files change.\n\n### The `test:main` suite\n\nAs said before, this suite will let you test the code you write for the main process (i.e everything in the\n[`main/`](main) directory).\n\nTo do so, it is configured to use Jest as the runner and Spectron as the testing library. Spectron will let you interact\nwith the actual application, find elements, windows, ...\n\nThere are mainly 2 types of test you are likely to write here:\n\n-   unit tests to check some utility code or library you write for the main process;\n-   functional tests to check the application is working correctly.\n\nIn the later case, you will have to configure, start and stop the application for each test case, `create-electrona-app`\nprovides some helpers to ease these tasks:\n\n#### `application({Object}): {Promise\u003cmodule:spectron.Application\u003e}`\n\nThis helper will let you configure your application and eventually start it. It takes an object describing options as\nits only argument. You will find detailed explanations on the options [here](https://github.com/electron/spectron#new-applicationoptions).\n\nAn extra option is available: `autoStart`. Its default value is `true` meaning the application will automatically be start\nbut you can set it to `false` if you want to start it manually\n\nYou will likely call this helper in `beforeAll` or `beforeEach`:\n\n```js\nlet app;\n\nbeforeAll(async () =\u003e (app = await application()));\n```\n\n#### `stop({module:spectron.Application}): {Promise\u003cmodule:spectron.Application|null\u003e}`\n\nDuring a test suite, you will sometimes have to reset application state. This helper will let you stop your application.\n\nYou will likely call this helper in `afterAll` or `afterEach`:\n\n```js\nlet app;\n\n// Start your application...\n\nafterAll(() =\u003e stop(app));\n```\n\n### The `test:renderer` suite\n\nThis test suite is a standard Jest suite configured to test your React components.\n\nWe highly recommend you read the [official documentation](https://jestjs.io/docs/en/tutorial-react).\n[Enzyme](https://airbnb.io/enzyme/) is configured with the React adapter.\n\n**If you ever upgrade React, you will need to upgrade the Enzyme adapter in [`config/jest/setup.renderer.js`](config/jest/setup.renderer.js).**\n\nWe've also added [`redux-mock-store`](https://github.com/dmitry-zaets/redux-mock-store). It will let you\ntest component connected to a [Redux store](https://redux.js.org/basics/store).\n\n### The `test:shared` suite\n\nThis suite if probably the simplest one: it only uses Jest as the runner and the [standard matchers](https://jestjs.io/docs/en/expect).\n\n## 🚀 Package \u0026 Distribute\n\n`create-electron-app` comes with a [default configuration](config/electron-builder.js) for\n[`electron-builder`](https://github.com/electron-userland/electron-builder). It will allow you to package your\napplication for Window, MacOS and Linux (Debian, RHEL).\n\nBefore you package and publish your application, it is highly recommended that you test it as if it were packaged. Here\nis how you would do that:\n\n```shell\nNODE_ENV=production npm run build\nnpm run electron\n```\n\nThis will build the application in the `production` environment and run electron from the `dist/` directory (where the\ncompiled sources are written). If you see nothing wrong, you can go ahead and package the application:\n\n```shell\nnpm run package\n```\n\nIf you are using the default configuration, you should get a `packages/` directory where all the artifact will be\nwritten: DMG, MacOS App, Deb, RPM, ...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjubianchi%2Fcreate-electron-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjubianchi%2Fcreate-electron-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjubianchi%2Fcreate-electron-app/lists"}