├── .nvmrc ├── static ├── .nojekyll ├── js │ └── ads.js ├── CNAME ├── logo │ ├── logo.png │ └── logo.svg ├── img │ ├── app-showcase │ │ ├── cmde.png │ │ ├── dbglass.jpg │ │ ├── falcon.png │ │ ├── ivideo.png │ │ ├── popsql.gif │ │ ├── channels.jpg │ │ ├── left-on-read.gif │ │ ├── recollector.png │ │ ├── popcorn-time-desktop.png │ │ └── expresslrs-configurator.jpg │ └── bundle-analyzer-example.png └── css │ └── custom.css ├── .husky ├── .gitignore └── pre-commit ├── docs ├── reading-files.md ├── faq.md ├── internals.md ├── installation-debugging-solutions.md ├── building.md ├── installation.md ├── packaging.md ├── dev-tools.md ├── tool-tips.md ├── editor-configuration.md ├── adding-dependencies.md ├── e2e-tests.md ├── adding-assets.md ├── upgrade-guide.md ├── roadmap.md ├── electron-store.md ├── auto-update.md ├── component-tests.md ├── native-modules.md ├── integration-tests.md ├── app-showcase.md ├── ci.md └── styling.md ├── .github ├── FUNDING.yml └── workflows │ ├── test.yml │ └── codeql-analysis.yml ├── blog └── 2018-10-22-hello-world.md ├── .editorconfig ├── sidebars.js ├── src ├── css │ └── custom.css └── pages │ ├── styles.module.css │ └── index.js ├── README.md ├── .eslintignore ├── .gitignore ├── LICENSE ├── crowdin.yaml ├── package.json ├── .proselintrc └── docusaurus.config.js /.nvmrc: -------------------------------------------------------------------------------- 1 | node -------------------------------------------------------------------------------- /static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/js/ads.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /static/CNAME: -------------------------------------------------------------------------------- 1 | electron-react-boilerplate.js.org 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /static/logo/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/logo/logo.png -------------------------------------------------------------------------------- /docs/reading-files.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: reading-files 3 | title: Reading Files 4 | sidebar_label: Reading Files 5 | --- 6 | -------------------------------------------------------------------------------- /static/img/app-showcase/cmde.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/app-showcase/cmde.png -------------------------------------------------------------------------------- /static/img/app-showcase/dbglass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/app-showcase/dbglass.jpg -------------------------------------------------------------------------------- /static/img/app-showcase/falcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/app-showcase/falcon.png -------------------------------------------------------------------------------- /static/img/app-showcase/ivideo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/app-showcase/ivideo.png -------------------------------------------------------------------------------- /static/img/app-showcase/popsql.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/app-showcase/popsql.gif -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [amilajack] 2 | patreon: amilajack 3 | custom: ['https://paypal.me/amilajack', 'https://venmo.com/amilajack'] 4 | -------------------------------------------------------------------------------- /static/img/app-showcase/channels.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/app-showcase/channels.jpg -------------------------------------------------------------------------------- /static/img/bundle-analyzer-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/bundle-analyzer-example.png -------------------------------------------------------------------------------- /static/img/app-showcase/left-on-read.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/app-showcase/left-on-read.gif -------------------------------------------------------------------------------- /static/img/app-showcase/recollector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/app-showcase/recollector.png -------------------------------------------------------------------------------- /static/img/app-showcase/popcorn-time-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/app-showcase/popcorn-time-desktop.png -------------------------------------------------------------------------------- /static/img/app-showcase/expresslrs-configurator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electron-react-boilerplate/docs/HEAD/static/img/app-showcase/expresslrs-configurator.jpg -------------------------------------------------------------------------------- /blog/2018-10-22-hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hello World 3 | author: Amila Welihinda 4 | --- 5 | 6 | After a couple years of development, electron-react-boilerplate finally has a website! Subscribe to our blog for updates on the progress of the project 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /static/css/custom.css: -------------------------------------------------------------------------------- 1 | /* your custom css */ 2 | 3 | @media only screen and (min-device-width: 360px) and (max-device-width: 736px) { 4 | } 5 | 6 | @media only screen and (min-width: 1024px) { 7 | } 8 | 9 | @media only screen and (max-width: 1023px) { 10 | } 11 | 12 | @media only screen and (min-width: 1400px) { 13 | } 14 | 15 | @media only screen and (min-width: 1500px) { 16 | } 17 | -------------------------------------------------------------------------------- /sidebars.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | docs: { 3 | "Getting Started": ["installation", "editor-configuration"], 4 | Basics: [ 5 | "building", 6 | "packaging", 7 | "adding-assets", 8 | "adding-dependencies", 9 | "native-modules", 10 | "styling", 11 | "auto-update", 12 | ], 13 | Testing: ["component-tests", "integration-tests", "ci"], 14 | Advanced: ["electron-store", "internals", "tool-tips", "dev-tools", "faq"], 15 | Guides: ["upgrade-guide"], 16 | "Community Content": ["app-showcase"], 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /docs/faq.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: faq 3 | title: FAQ 4 | sidebar_label: FAQ 5 | --- 6 | 7 | ## Why is webpack a good idea for electron? 8 | 9 | Electron apps face huge hurdles when it comes to matching native performance. There's a number of reasons for that. One of those issues is that a main electron app does not have Ahead-of-Time (AOT) compilation. No optimizations are made to code performance. [`require()`](https://kev.inburke.com/kevin/node-require-is-dog-slow/) is **really** slow. Webpack helps us reduce the amount of calls made to require by bundling all our code (when possible) into single file. [Atom is slow primarily because it makes so many require statements](https://github.com/atom/atom/issues/9720). 10 | -------------------------------------------------------------------------------- /docs/internals.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: internals 3 | title: Internals 4 | sidebar_label: Internals 5 | --- 6 | 7 | ## Webpack Configurations 8 | 9 | Webpack configs are located inside the `./configs` directory 10 | 11 | ## Internal Scripts 12 | 13 | The scripts inside the `.erb/scripts` handle functionality that cannot be written as npm scripts. 14 | 15 | The scripts are the following: 16 | 17 | - `check-build-exists.js`: Check if the main and renderer processes have been built. These processes must be build before running E2E tests 18 | - `check-node-env.js`: Assert that `NODE_ENV` is the expected value. Throw if assertion fails 19 | - `check-port-in-use.js`: Finds a free port if default port for ERB is in use 20 | -------------------------------------------------------------------------------- /src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * /src/css/custom.css 3 | * You can override the default Infima variables here. 4 | * Note: this is not a complete list of --ifm- variables. 5 | */ 6 | :root { 7 | --ifm-color-primary: #b54692; 8 | --ifm-color-primary-dark: #a33f83; 9 | --ifm-color-primary-darker: #9a3b7c; 10 | --ifm-color-primary-darkest: #60254d; 11 | --ifm-color-primary-light: #be569d; 12 | --ifm-color-primary-lighter: #c15fa2; 13 | --ifm-color-primary-lightest: #cc7bb2; 14 | } 15 | 16 | .announcementBarContent_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module { 17 | background-color: var(--ifm-color-primary); 18 | color: white; 19 | padding: 2rem; 20 | font-weight: bold; 21 | text-decoration: none; 22 | } 23 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: push 4 | 5 | jobs: 6 | release: 7 | runs-on: ${{ matrix.os }} 8 | 9 | strategy: 10 | matrix: 11 | os: [ubuntu-latest] 12 | 13 | steps: 14 | - name: Check out Git repository 15 | uses: actions/checkout@v2 16 | 17 | - name: Install Node.js, NPM and npm 18 | uses: actions/setup-node@v2 19 | with: 20 | node-version: 16 21 | cache: npm 22 | 23 | - name: Install proselint 24 | run: | 25 | sudo add-apt-repository universe 26 | sudo apt-get install -y python3-proselint 27 | 28 | - name: npm ci 29 | run: npm ci 30 | 31 | - name: npm run build 32 | run: npm run build 33 | 34 | - name: npm test 35 | run: npm test 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # site 2 | 3 | [![Test](https://github.com/electron-react-boilerplate/site/actions/workflows/test.yml/badge.svg)](https://github.com/electron-react-boilerplate/site/actions/workflows/test.yml) 4 | 5 | The website for [electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate) 6 | 7 | ## Setup 8 | 9 | ```sh 10 | # Install dependencies 11 | npm install 12 | # Start the site 13 | npm start 14 | ``` 15 | 16 | ## Project Stucture and Contributing 17 | 18 | For details, see [the docusarus docs](https://v2.docusaurus.io) 19 | 20 | ## Contributing 21 | 22 | ### Adding to App Showcase 23 | 24 | If you built an app with ERB and would like to add your app to the showcase, please add it to the end of the list. 25 | 26 | Please be sure to also include a screenshot or a .gif. 27 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | .eslintcache 25 | 26 | # Dependency directory 27 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 28 | node_modules 29 | 30 | # OSX 31 | .DS_Store 32 | 33 | .idea 34 | npm-debug.log.* 35 | __snapshots__ 36 | 37 | # Package.json 38 | package.json 39 | .travis.yml 40 | dist 41 | build 42 | static 43 | 44 | .docusaurus/site-gh-pages 45 | -------------------------------------------------------------------------------- /docs/installation-debugging-solutions.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: installation-debugging-solutions 3 | title: Installation Debugging Solutions 4 | sidebar_label: Installation Debugging Solutions 5 | --- 6 | 7 | This to be a list of solutions for installation issues with this project: 8 | 9 | 1. Fix `node-gyp` issues: 10 | Follow the steps in [https://github.com/nodejs/node-gyp#installation](https://github.com/nodejs/node-gyp#installation). You don't need to install `node-gyp` but make sure that you have the correct environment setup for your OS. 11 | 2. Test installation against latest npm npm/node version 12 | 3. Fix Caching Issues 13 | 14 | ``` 15 | rm -rf node_modules && 16 | npm install && 17 | npm run electron-rebuild && 18 | npm start 19 | ``` 20 | 21 | 4. If you're on Windows, try using [cmder](http://cmder.net) 22 | 23 | ### Debugging Release Builds 24 | 25 | ```bash 26 | cross-env DEBUG_PROD=true npm run build 27 | cross-env DEBUG_PROD=true npm start 28 | ``` 29 | -------------------------------------------------------------------------------- /docs/building.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: building 3 | title: Building 4 | sidebar_label: Building 5 | --- 6 | 7 | Webpack is one of the most crucial parts of ERB's infrastructure as with many other React projects. It provides us with many optimizations such as dead code stripping, tree shaking, and code splitting to name a few. Webpack allows you to scale your application and add many components and layers of abstraction without sacrificing the performance of your app. 8 | 9 | ## Build an App 10 | 11 | Building a production version of your app will optimize the JS, CSS, and SASS of your application. 12 | 13 | To create a production build, run `npm run build`: 14 | 15 | ```bash 16 | npm run build 17 | ``` 18 | 19 | ## Inspecting Build Size 20 | 21 | If you want to reduce the build size of your app, you can open a treemap of your build: 22 | 23 | ![treemap bundle example](/img/bundle-analyzer-example.png) 24 | 25 | To create a production build: 26 | 27 | ```bash 28 | ANALYZE=true npm run build 29 | ``` 30 | -------------------------------------------------------------------------------- /docs/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: installation 3 | title: Installation 4 | sidebar_label: Installation 5 | --- 6 | 7 | ```bash 8 | # Clone the boilerplate: 9 | git clone --depth=1 \ 10 | https://github.com/electron-react-boilerplate/electron-react-boilerplate \ 11 | your-project-name 12 | 13 | cd your-project-name 14 | 15 | # Install dependencies: 16 | npm install 17 | ``` 18 | 19 | :::tip 20 | If you have installation or compilation issues with this project, please see [our installation debugging guide](https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/400) 21 | ::: 22 | 23 | ## Run 24 | 25 | Start the app in the `dev` environment. This starts the main process with hot updates using [**electronmon**](https://github.com/catdad/electronmon) and the renderer process in [**hot-module-replacement**](https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr) mode and starts a webpack dev server that sends hot updates to the renderer process: 26 | 27 | ```bash 28 | npm start 29 | ``` 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | meta.json 3 | 4 | # Logs 5 | logs 6 | *.log 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | 13 | # Directory for instrumented libs generated by jscoverage/JSCover 14 | lib-cov 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 20 | .grunt 21 | 22 | # node-waf configuration 23 | .lock-wscript 24 | 25 | # Compiled binary addons (http://nodejs.org/api/addons.html) 26 | build/Release 27 | .eslintcache 28 | 29 | # Dependency directory 30 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 31 | node_modules 32 | 33 | # OSX 34 | .DS_Store 35 | 36 | .idea 37 | npm-debug.log.* 38 | lib 39 | 40 | # dependencies 41 | /node_modules 42 | 43 | # production 44 | /build 45 | 46 | # generated files 47 | .docusaurus 48 | .cache-loader 49 | 50 | # misc 51 | .DS_Store 52 | .env.local 53 | .env.development.local 54 | .env.test.local 55 | .env.production.local 56 | 57 | npm-debug.log* 58 | -------------------------------------------------------------------------------- /docs/packaging.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: packaging 3 | title: Packaging 4 | sidebar_label: Packaging 5 | --- 6 | 7 | To package apps for the local platform: 8 | 9 | ```bash 10 | npm run package 11 | ``` 12 | 13 | The packaged app will be inside the `release` directory. 14 | 15 | To package apps with options: 16 | 17 | ```bash 18 | npm run package -- --[option] 19 | # Example: npm run package -- --mac 20 | ``` 21 | 22 | ### Debugging Production Builds 23 | 24 | You can debug your production build with devtools by simply setting the `DEBUG_PROD` env variable 25 | 26 | ```bash 27 | npx cross-env DEBUG_PROD=true npm run package 28 | ``` 29 | 30 | ## Notarizing 31 | 32 | To notarize your macOS app, you will need to set the following environment variables: 33 | 34 | - `APPLE_ID` - Your Apple ID 35 | - `APPLE_APP_SPECIFIC_PASSWORD` - Your Apple ID password 36 | 37 | In `package.json` -> `build` -> `mac` the `teamId` key needs to be set: 38 | 39 | ``` 40 | "notarize": { 41 | "teamId": "YOUR_TEAM_ID" 42 | } 43 | ``` 44 | 45 | This above config will automatically get electron-builder to notarize the build. 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-present Electron React Boilerplate 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/pages/styles.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 4rem 0; 8 | text-align: center; 9 | position: relative; 10 | overflow: hidden; 11 | background: linear-gradient( 12 | 200.96deg, 13 | #fedc2a -29.09%, 14 | #dd5789 51.77%, 15 | #7a2c9e 129.35% 16 | ); 17 | } 18 | 19 | @media screen and (max-width: 966px) { 20 | .heroBanner { 21 | padding: 2rem; 22 | } 23 | } 24 | 25 | .getStarted { 26 | background-color: white; 27 | padding: 10px 20px; 28 | border-radius: 10px; 29 | border: none; 30 | appearance: none; 31 | font-size: 1.3rem; 32 | box-shadow: 0px 8px 28px -6px rgba(24, 39, 75, 0.12), 33 | 0px 18px 88px -4px rgba(24, 39, 75, 0.14); 34 | transition: transform ease-in 0.1s; 35 | cursor: pointer; 36 | color: black; 37 | } 38 | 39 | .getStarted:hover { 40 | transform: scale(1.05); 41 | color: black; 42 | } 43 | 44 | .features { 45 | display: flex; 46 | align-items: center; 47 | padding: 2rem 0; 48 | width: 100%; 49 | } 50 | 51 | .featureImage { 52 | height: 200px; 53 | width: 200px; 54 | } 55 | -------------------------------------------------------------------------------- /docs/dev-tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: dev-tools 3 | title: DevTools 4 | sidebar_label: DevTools 5 | --- 6 | 7 | ### Toggle Chrome DevTools 8 | 9 | - OS X: Cmd Alt I or F12 10 | - Linux: Ctrl Shift I or F12 11 | - Windows: Ctrl Shift I or F12 12 | 13 | _See [electron-debug](https://github.com/sindresorhus/electron-debug) for more information._ 14 | 15 | ### DevTools extension 16 | 17 | This boilerplate includes the following DevTools extensions: 18 | 19 | - [Devtron](https://github.com/electron/devtron) - Install via [electron-debug](https://github.com/sindresorhus/electron-debug). 20 | - [React Developer Tools](https://github.com/facebook/react-devtools) - Install via [electron-devtools-installer](https://github.com/GPMDP/electron-devtools-installer). 21 | - [Redux DevTools](https://github.com/zalmoxisus/redux-devtools-extension) - Install via [electron-devtools-installer](https://github.com/GPMDP/electron-devtools-installer). 22 | 23 | You can find the tabs on Chrome DevTools. 24 | 25 | If you want to update extensions version, please set `UPGRADE_EXTENSIONS` env, just run: 26 | 27 | ```bash 28 | UPGRADE_EXTENSIONS=1 npm start 29 | 30 | # For Windows 31 | set UPGRADE_EXTENSIONS=1 && npm start 32 | ``` 33 | -------------------------------------------------------------------------------- /crowdin.yaml: -------------------------------------------------------------------------------- 1 | project_identifier_env: CROWDIN_DOCUSAURUS_PROJECT_ID 2 | api_key_env: CROWDIN_DOCUSAURUS_API_KEY 3 | base_path: "./" 4 | preserve_hierarchy: true 5 | 6 | files: 7 | - source: "/docs/*.md" 8 | translation: "/translated_docs/%locale%/%original_file_name%" 9 | languages_mapping: &anchor 10 | locale: 11 | "af": "af" 12 | "ar": "ar" 13 | "bs-BA": "bs-BA" 14 | "ca": "ca" 15 | "cs": "cs" 16 | "da": "da" 17 | "de": "de" 18 | "el": "el" 19 | "es-ES": "es-ES" 20 | "fa": "fa-IR" 21 | "fi": "fi" 22 | "fr": "fr" 23 | "he": "he" 24 | "hu": "hu" 25 | "id": "id-ID" 26 | "it": "it" 27 | "ja": "ja" 28 | "ko": "ko" 29 | "mr": "mr-IN" 30 | "nl": "nl" 31 | "no": "no-NO" 32 | "pl": "pl" 33 | "pt-BR": "pt-BR" 34 | "pt-PT": "pt-PT" 35 | "ro": "ro" 36 | "ru": "ru" 37 | "sk": "sk-SK" 38 | "sr": "sr" 39 | "sv-SE": "sv-SE" 40 | "tr": "tr" 41 | "uk": "uk" 42 | "vi": "vi" 43 | "zh-CN": "zh-CN" 44 | "zh-TW": "zh-TW" 45 | "en-UD": "en-UD" 46 | - source: "/versioned_docs/**/*.md" 47 | translation: "/translated_docs/%locale%/**/%original_file_name%" 48 | languages_mapping: *anchor 49 | - source: "/i18n/en.json" 50 | translation: "/i18n/%locale%.json" 51 | languages_mapping: *anchor 52 | -------------------------------------------------------------------------------- /docs/tool-tips.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: tool-tips 3 | title: Tooling Tips 4 | sidebar_label: Tooling Tips 5 | --- 6 | 7 | This page is intended for sharing less known tips about tools used in this boilerplate. Tools are computer programs that are used to maintain and support electron-react-boilerplate. For example, `git`, `yarn`, `npm` etc. 8 | 9 | ## Keeping commit history clean 10 | 11 | When you clone this project and down the line keep your copy updated with the upstream, you end up with lot many commits that are made by contributors to this boilerplate. Meanwhile you too keep committing in your copy in order to develop your project. You may feel that your `git log` is polluted with commits made to this boilerplate, when you prefer `git log` to show only those commits that are directly related to your project. 12 | 13 | One workaround is to use `--depth 1` switch in your `git clone` and `git fetch` command. 14 | 15 | For example, 16 | 17 | ```bash 18 | # When cloning this boilerplate for the first time 19 | git clone --depth=1 https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name 20 | # To fetch updated copy of boilerplate 21 | git fetch --depth 1 git@github.com:electron-react-boilerplate/electron-react-boilerplate.git 22 | ``` 23 | 24 | ### Further Readings: 25 | 26 | - [`git clone` documentation](https://git-scm.com/docs/git-clone) 27 | - [`git fetch` documentation](https://git-scm.com/docs/git-fetch) 28 | - [Question: Best way to clean repository after initializing new project? #782](https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/782) 29 | -------------------------------------------------------------------------------- /docs/editor-configuration.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: editor-configuration 3 | title: Editor Configuration 4 | sidebar_label: Editor Configuration 5 | --- 6 | 7 | import Tabs from '@theme/Tabs'; 8 | import TabItem from '@theme/TabItem'; 9 | 10 | 19 | 20 | 21 | :::tip 22 | vscode will suggest installing the plugins recommended by electron-react-boilerplate. This is the recommended way of installing the recommended editor plugins 23 | ::: 24 | 25 | If you would like to manually install the plugins you can use the `code` executable. If you have `code` in your `PATH`, you can run the following command: 26 | 27 | ```bash 28 | code --install-extension dbaeumer.vscode-eslint 29 | code --install-extension dzannotti.vscode-babel-coloring 30 | code --install-extension EditorConfig.EditorConfig 31 | ``` 32 | 33 | 34 | 35 | 36 | 37 | ```bash 38 | apm install editorconfig linter linter-eslint language-babel atom-typescript 39 | ``` 40 | 41 | 42 | 43 | 44 | 45 | - [Editorconfig Integration](https://github.com/sindresorhus/editorconfig-sublime#readme) 46 | - [TypeScript](https://packagecontrol.io/packages/TypeScript) 47 | - [Linting](https://github.com/SublimeLinter/SublimeLinter3) 48 | - [ESLint Integration](https://github.com/roadhump/SublimeLinter-eslint) 49 | - [Syntax Highlighting](https://github.com/babel/babel-sublime) 50 | - [Autocompletion](https://github.com/ternjs/tern_for_sublime) 51 | - [Node Snippets](https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets) 52 | - [ES6 Snippets](https://packagecontrol.io/packages/ES6-Toolkit) 53 | 54 | 55 | 56 | 57 | 58 | - [Editorconfig](http://editorconfig.org/#download) 59 | - [ESLint](http://eslint.org/docs/user-guide/integrations#editors) 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@electron-react-boilerplate/site", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "build": "docusaurus build", 8 | "deploy": "docusaurus deploy", 9 | "docusaurus": "docusaurus", 10 | "lint": "eslint .", 11 | "lint-prose": "cp .proselintrc ~/ && proselint docs blog", 12 | "prepare": "husky install", 13 | "start": "docusaurus start", 14 | "swizzle": "docusaurus swizzle", 15 | "test": "npm run lint-prose && npm run build" 16 | }, 17 | "lint-staged": { 18 | "*.{js,ts,tsx}": [ 19 | "prettier --write --ignore-path .eslintignore", 20 | "eslint --cache --fix" 21 | ] 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | }, 35 | "eslintConfig": { 36 | "extends": [ 37 | "bliss" 38 | ] 39 | }, 40 | "dependencies": { 41 | "@docusaurus/core": "^2.1.0", 42 | "@docusaurus/plugin-google-analytics": "^2.1.0", 43 | "@docusaurus/plugin-google-gtag": "^2.1.0", 44 | "@docusaurus/preset-classic": "^2.1.0", 45 | "@typescript-eslint/eslint-plugin": "^5.38.1", 46 | "@typescript-eslint/parser": "^5.38.1", 47 | "classnames": "^2.3.2", 48 | "eslint": "8.x", 49 | "eslint-config-airbnb": "^19.0.4", 50 | "eslint-config-airbnb-typescript": "^17.0.0", 51 | "eslint-config-bliss": "^6.0.4", 52 | "eslint-config-bliss-typescript": "^6.0.1", 53 | "eslint-config-prettier": "^8.5.0", 54 | "eslint-plugin-compat": "^4.0.2", 55 | "eslint-plugin-import": "^2.26.0", 56 | "eslint-plugin-jest": "^27.0.4", 57 | "eslint-plugin-jsx-a11y": "^6.6.1", 58 | "eslint-plugin-prettier": "^4.2.1", 59 | "eslint-plugin-react": "^7.31.8", 60 | "husky": "^8.0.1", 61 | "jest": "^29.1.1", 62 | "lint-staged": "^13.0.3", 63 | "react": "^17.0.2", 64 | "react-dom": "^17.0.2" 65 | }, 66 | "renovate": { 67 | "extends": [ 68 | "bliss" 69 | ] 70 | }, 71 | "babel": {} 72 | } 73 | -------------------------------------------------------------------------------- /docs/adding-dependencies.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: adding-dependencies 3 | title: Adding Dependencies 4 | sidebar_label: Adding Dependencies 5 | --- 6 | 7 | ## Add modules to the project 8 | 9 | You will need to add other modules to this boilerplate, depending on the requirements of your project. For example, you may want to add [node-postgres](https://github.com/brianc/node-postgres) to communicate with PostgreSQL database, or 10 | [material-ui](http://www.material-ui.com/) to reuse React UI components. 11 | 12 | :::tip 13 | Please read the following section before installing any dependencies 14 | ::: 15 | 16 | ### Module Structure 17 | 18 | This boilerplate uses a [two package.json structure](https://www.electron.build/tutorials/two-package-structure.html). This means you will have two `package.json` files. 19 | 20 | 1. `./package.json` in the root of your project 21 | 2. `./release/app/package.json` relative to the project root 22 | 23 | ### Which `package.json` file to use 24 | 25 | **Rule of thumb** is: all modules go into `./package.json` except for native modules, or modules with native dependencies or peer dependencies. Native modules, or packages with native dependencies should go into `./release/app/package.json`. 26 | 27 | 1. If the module is native to a platform (like node-postgres), it should be listed under `dependencies` in `./release/app/package.json` 28 | 2. If a module is `import`ed by another module, include it in `dependencies` in `./package.json`. See [this ESLint rule](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md). Examples of such modules are `material-ui`, `redux-form`, and `moment`. 29 | 3. Otherwise, modules used for building, testing, and debugging should be included in `devDependencies` in `./package.json`. 30 | 31 | ### Further Readings 32 | 33 | - See [Electron Documentation - Using Native Node Modules](https://www.electronjs.org/docs/tutorial/using-native-node-modules) to see how Electron uses native Node modules. 34 | - See [Node.js Documentation - Addons](https://nodejs.org/api/addons.html) to see what are native Node modules. 35 | 36 | For an example app that uses this boilerplate and packages native dependencies, see [erb-sqlite-example](https://github.com/amilajack/erb-sqlite-example). 37 | -------------------------------------------------------------------------------- /docs/e2e-tests.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: e2e-tests 3 | title: End to End Tests 4 | sidebar_label: End to End Tests 5 | --- 6 | 7 | End to End (E2E) tests are high level tests that tests. Instead of testing lower level functionality, such as if components render correctly or functions take certain arguments, they test at the application level. These are typically the kinds of tests that you would run to check if you app works. We have chosen [Testcafe](https://github.com/DevExpress/testcafe) as our testing framework. It is a much nicer alternative to [webdriverio](http://webdriver.io), [spectron](https://electronjs.org/spectron), and [selenium](https://www.seleniumhq.org). 8 | 9 | ## Writing End to End Tests 10 | 11 | By convention, all E2E test modules have the following filename suffix: `.e2e.js`. An example of test module filename would be `HomePage.e2e.js`. 12 | 13 | Here's some examples of E2E tests: 14 | 15 | - Testing if your app opens and closes 16 | - Testing if the title bar has the expected text 17 | - Testing if a popup shows after clicking a button 18 | 19 | Here's an example of an E2E test: 20 | 21 | ```ts 22 | test("e2e", async (t) => { 23 | await t.expect(getPageTitle()).eql("Hello Electron React!"); 24 | }); 25 | ``` 26 | 27 | Simply by reading this test, we can infer what it does: 28 | 29 | 1. Gets the page title 30 | 2. Asserts that it equals `'Hello Electron React!'` 31 | 3. Returns a promise 32 | 33 | For more writing tests with Testcafe, refer to [their docs](https://devexpress.github.io/testcafe/documentation/test-api/). 34 | 35 | ## Running Tests 36 | 37 | After you have written E2E tests, we can now run tests. E2E tests must be built before running them. So we can run `npm run build-e2e` to build the E2E tests and then `npm test-e2e`: 38 | 39 | ```bash 40 | npm run build-e2e 41 | npm test-e2e 42 | ``` 43 | 44 | If you would like to run the E2E tests in the background without them opening (headlessly), run `START_MINIMIZED=true npm run build-e2e` and then run the E2E tests: 45 | 46 | ```bash 47 | START_MINIMIZED=true npm run build-e2e 48 | npm test-e2e 49 | ``` 50 | 51 | ### Watching Tests 52 | 53 | Similar to watching component tests, can be watched as well. This can be done by running `npm test-e2e-live`. `testcafe --live` is used to watch tests and run. 54 | -------------------------------------------------------------------------------- /docs/adding-assets.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: adding-assets 3 | title: Adding Assets 4 | sidebar_label: Adding Assets 5 | --- 6 | 7 | A common part of applications is importing assets, such as images, fonts, and files. 8 | 9 | ## Build-time Assets 10 | 11 | In the context of ERB, build-time assets are those that are managed by Webpack. They are imported like JS modules and transformed to encoded strings by Webpack. 12 | 13 | Out of the box, ERB supports the following assets: 14 | 15 | | Asset | Supported Extensions | 16 | | ------ | :--------------------: | 17 | | Images | `.png`, `.svg`, `.jpg`, `jpeg`, `gif` | 18 | | Fonts | `.svg`, `woff`, `woff2`, `eot`, `.ttf`, `.otf` | 19 | ```tsx 20 | import catImage from "./cat.jpg"; 21 | 22 | function CatComponent() { 23 | return ; 24 | } 25 | ``` 26 | 27 | ## Run-time Assets 28 | 29 | In the context of ERB, run-time assets are separate files that are included in the packaged application and used through file paths. You will need to include their locations in `package.json['build']['files']`. This is so that [electron-builder's configuration](https://www.electron.build/configuration/contents#files) knows to include them when packaging. 30 | 31 | (Note that these locations are relative to the `release/app` directory) 32 | 33 | ```jsonc 34 | "build": { 35 | // ... 36 | "files": [ 37 | "my-files/" 38 | // ... 39 | ], 40 | } 41 | ``` 42 | 43 | For example, you can include Python within your electron app and call it at run-time to print `Hello World from Python`. 44 | 45 | ```ts 46 | const pythonBinary = path.join(__dirname, "assets", "python"); 47 | const pythonScript = 'print("Hello World from Python")'; 48 | exec(`echo '${pythonScript}' | ${pythonBinary}`, (error, stdout) => { 49 | console.log(`stdout: ${stdout}`); 50 | }); 51 | ``` 52 | 53 | [Here is a runnable example of this](https://github.com/electron-react-boilerplate/examples/commit/d1eddcd0e30ec22edd3fd3900ee3c12e1da4cdba) 54 | 55 | A useful tip is using `asar` (the format that `electron-builder` packages into) to see the contents of the packaged build. You will see that it contains content included within `package.json['build']['files']`. 56 | 57 | ```bash 58 | asar list release/mac/ElectronReact.app/Contents/Resources/app.asar 59 | ``` 60 | -------------------------------------------------------------------------------- /docs/upgrade-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: upgrade-guide 3 | title: Upgrade Guide 4 | sidebar_label: Upgrade Guide 5 | --- 6 | 7 | This project moves pretty quickly and demonstrates the best practices of JavaScript, Electron, and React. Keep in mind that this is a boilerplate project with a purposefully tiny feature set (a counter). The boilerplate will enable you to build an advanced app with a large feature set, and over time your advanced app will diverge from the simple feature set of the boilerplate. 8 | 9 | 10 | #### Keeping the boilerplate updated 11 | 12 | If your application is a fork from this repo, you can add this repo to another git remote: 13 | 14 | ``` sh 15 | git remote add upstream https://github.com/electron-react-boilerplate/electron-react-boilerplate.git 16 | ``` 17 | 18 | Then, use git to merge some latest commits: 19 | 20 | ``` sh 21 | git pull upstream main 22 | ``` 23 | 24 | #### Tips for keeping your app modernized 25 | 26 | - Track explanations of the changes between versions in this [Upgrade Guide](https://electron-react-boilerplate.js.org/docs/upgrade-guide#ugrading-to-0170-from-0160) and in the [CHANGELOG](https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/next/CHANGELOG.md). 27 | - Try merging new releases into your project, especially early on, but expect your project to evolve beyond the boilerplate and for merging upstream changes into your project to become untenable. 28 | - Subscribe to changes from this repo. Even if you can't merge every change into your project, watching changes from this repo will help ensure you don't miss major changes, and help you appreciate the smaller ones. 29 | - If something breaks in your app, try it in the boilerplate. Seeing if something works in the boilerplate can help you understand if it's a configuration issue inherited by the boilerplate or something you broke on your own. This is especially relevant for building native modules, Webpack config changes, babel config changes, additional renderer processes, etc. 30 | - Be realistic about what this project gives you. The boilerplate is meant to be a working educational example. It's a demonstration, not a black-box development framework for you to build on top of. Inspect the boilerplate, understand how it works, and tweak your app to meet your needs. 31 | -------------------------------------------------------------------------------- /docs/roadmap.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: roadmap 3 | title: Roadmap 4 | sidebar_label: Roadmap 5 | --- 6 | 7 | ## Release v2.0.0 8 | 9 | - Migrate to `webpack@5` 10 | - React fast refresh 11 | - Drop Redux integration 12 | - Add macOS notarize support 13 | - Simplify directory structure 14 | - Remove counter app boilerplate example 15 | - Migrate to `electron@11` 16 | 17 | ## Release v1.2.0 18 | 19 | - Migrate to [redux-toolkit](https://redux-toolkit.js.org/) 20 | 21 | ## Future Releases 22 | 23 | ## Release v1.4.0 24 | 25 | - Drop redux support 26 | - Restore electron preload as default 27 | - Auto update integration 28 | - Enhanced vscode debugger intetgration 29 | - Migrate to hooks 30 | - Publishing to web and ERB 31 | - Hot reload main process 32 | - docs 33 | - using binary assets at runtime 34 | - tray ERB app 35 | - Examples with bootstrap 36 | - Examples with material-ui 37 | - Video tutorial series 38 | 39 | # ✅ Past Releases 40 | 41 | ## Release v1.0.0 42 | 43 | #### Migrate to TypeScript from Flow 44 | 45 | This is currently a work in progress for the ERB team. The reason why we waited for a while before migrating to TypeScript is because we wanted users to use ESLint and TypeScript as opposed to TypeScript and TSLint. ESLint and TypeScript integration was initially unstable and experimental so we wanted to wait a while before migrating. Now that the tooling is more stable, we have recently started working on the migration. 46 | 47 | #### Disabling Sourcemaps in Production 48 | 49 | Sourcemaps allow developers to map compiled code to source code. This makes debugging easier but when sourcemaps are shipped in production, they allow consumers of the application to view the original source code of the application. This is an issue for proprietary applications that depend on electron-react-boilerplate. As a result, sourcemaps will be disabled in production in `0.19.0`. 50 | 51 | #### Disabling Node Integration in Renderer 52 | 53 | For context, see [electron/electron/issues/5113](https://github.com/electron/electron/issues/5113). 54 | 55 | #### Migrate to Azure Pipelines 56 | 57 | Azure Pipelines allows concurrent builds for Windows, MacOS, and Linux. Rather than using Travis CI and Appveyor, Azure Pipelines will allow us to use a single CI for all platforms. While Travis CI does support Windows we've noticed that builds on it tend to be slow and the Windows builds tend to be unreliable and flaky. 58 | -------------------------------------------------------------------------------- /docs/electron-store.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: electron-store 3 | title: Electron Store 4 | sidebar_label: Electron Store 5 | --- 6 | 7 | ## Using `electron-store` with `electron-react-boilerplate` 8 | 9 | ### 1. Install `electron-store` 10 | 11 | ```bash 12 | npm install electron-store 13 | ``` 14 | 15 | ### 2. Electron IPC Configuration 16 | 17 | Electron strongly recommends disabling node integration in the renderer process, which is now the default. IPC is required to securely pass values between the main and renderer processes. You will have to add IPC event handlers which set and get `electron-store` through the `preload` script. 18 | 19 | Add the following event handlers to your preload script: 20 | 21 | ```ts title="src/main/preload.js" 22 | const { contextBridge, ipcRenderer } = require('electron'); 23 | 24 | contextBridge.exposeInMainWorld('electron', { 25 | store: { 26 | get(key) { 27 | return ipcRenderer.sendSync('electron-store-get', key); 28 | }, 29 | set(property, val) { 30 | ipcRenderer.send('electron-store-set', property, val); 31 | }, 32 | // Other method you want to add like has(), reset(), etc. 33 | }, 34 | // Any other methods you want to expose in the window object. 35 | // ... 36 | }); 37 | ``` 38 | 39 | Add event listeners in your main process: 40 | 41 | ```ts title="src/main/main.ts" 42 | import Store from 'electron-store'; 43 | 44 | const store = new Store(); 45 | 46 | // IPC listener 47 | ipcMain.on('electron-store-get', async (event, val) => { 48 | event.returnValue = store.get(val); 49 | }); 50 | ipcMain.on('electron-store-set', async (event, key, val) => { 51 | store.set(key, val); 52 | }); 53 | ``` 54 | 55 | ### 3. Add typings 56 | 57 | Add the following type defs: 58 | 59 | ```ts title="src/renderer/preload.d.ts" 60 | // ... 61 | 62 | declare global { 63 | interface Window { 64 | electron: { 65 | store: { 66 | get: (key: string) => any; 67 | set: (key: string, val: any) => void; 68 | // any other methods you've defined... 69 | }; 70 | }; 71 | } 72 | } 73 | ``` 74 | 75 | --- 76 | 77 | Now, you can set and get `electron-store` in your renderer processes: 78 | 79 | ```tsx title="src/renderer/App.tsx" 80 | // ... 81 | 90 | ``` 91 | -------------------------------------------------------------------------------- /docs/auto-update.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: auto-update 3 | title: Auto Update 4 | sidebar_label: Auto Update 5 | --- 6 | 7 | ## Requirements 8 | 9 | - [Apple Developer Certificate](https://www.electron.build/code-signing#where-to-buy-code-signing-certificate) (if targeting macOS) 10 | - [Windows Developer Certificate](https://www.electron.build/code-signing#where-to-buy-code-signing-certificate) (if targeting Windows) 11 | 12 | ## Auto Updates 13 | 14 | Electron works with auto updates out of the box. 15 | 16 | **1. Update Env Variables** 17 | 18 | To get started you'll need to configure the following environmental variables, which [electron-builder uses to sign your app](https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/ebf4120619254ec8df1051275b7c95674aa7114b/.github/workflows/publish.yml#L36-L39): 19 | 20 | | Variable Name | How to get it | 21 | | ------------------ | ---------------------------------------------------------------------------------------------- | 22 | | `APPLE_ID` | Your Apple ID | 23 | | `APPLE_ID_PASS` | Your Apple password (use an app [specific password](https://support.apple.com/en-us/HT204397)) | 24 | | `CSC_LINK` | [code-signing](https://www.electron.build/code-signing.html) | 25 | | `CSC_KEY_PASSWORD` | [code-signing](https://www.electron.build/code-signing.html) | 26 | 27 | https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/package.json#L34-L35 28 | 29 | See electron-builder's docs for more details: 30 | 31 | - https://www.electron.build/auto-update 32 | - https://www.electron.build/code-signing.html 33 | 34 | **2. Update App Config** 35 | 36 | Update the [`productName` and `appId`](https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/158fb1167b37d5cc74a3a3fbcf8523ece9d29806/package.json#L33-L34). 37 | 38 | **3. Configure Your Server** 39 | 40 | Auto update assets need to be published somewhere. For open source apps, its convenient and free to publish via [github releases](https://github.com/electron-react-boilerplate/electron-react-boilerplate/releases), which electron-react-boilerplate does out of the box. Electron-builder [doesn't recommend using github releases](https://www.electron.build/auto-update#private-github-update-repo) publish private apps. Instead you should host your releases you can host your own server 41 | 42 | See [electron-builder's publish docs](https://www.electron.build/configuration/publish) for more details. 43 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # ******** NOTE ******** 12 | 13 | name: "CodeQL" 14 | 15 | on: 16 | push: 17 | branches: [main] 18 | pull_request: 19 | # The branches below must be a subset of the branches above 20 | branches: [main] 21 | schedule: 22 | - cron: "21 10 * * 6" 23 | 24 | jobs: 25 | analyze: 26 | name: Analyze 27 | runs-on: ubuntu-latest 28 | 29 | strategy: 30 | fail-fast: false 31 | matrix: 32 | language: ["javascript"] 33 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 34 | # Learn more... 35 | # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection 36 | 37 | steps: 38 | - name: Checkout repository 39 | uses: actions/checkout@v2 40 | 41 | # Initializes the CodeQL tools for scanning. 42 | - name: Initialize CodeQL 43 | uses: github/codeql-action/init@v1 44 | with: 45 | languages: ${{ matrix.language }} 46 | # If you wish to specify custom queries, you can do so here or in a config file. 47 | # By default, queries listed here will override any specified in a config file. 48 | # Prefix the list here with "+" to use these queries and those in the config file. 49 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 50 | 51 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 52 | # If this step fails, then you should remove it and run the build manually (see below) 53 | - name: Autobuild 54 | uses: github/codeql-action/autobuild@v1 55 | 56 | # ℹ️ Command-line programs to run using the OS shell. 57 | # 📚 https://git.io/JvXDl 58 | 59 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 60 | # and modify them (or add more) to build your code if your project 61 | # uses a compiled language 62 | 63 | #- run: | 64 | # make bootstrap 65 | # make release 66 | 67 | - name: Perform CodeQL Analysis 68 | uses: github/codeql-action/analyze@v1 69 | -------------------------------------------------------------------------------- /docs/component-tests.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: component-tests 3 | title: Component Tests 4 | sidebar_label: Component Tests 5 | --- 6 | 7 | Component tests in ERB use [Jest](https://jestjs.io) and [Enzyme](https://github.com/airbnb/enzyme). While Jest is popular for React testing, it is also capable of testing Node applications as well. Enzyme provides some utilities that make it easier to test React applications. 8 | 9 | ## Writing Component Tests 10 | 11 | By convention, all component test modules have the following filename suffix: `.spec.js`. An example of test module filename would be `Counter.spec.js`. 12 | 13 | We start by writing a function that will setup the actions of our component and importing the necessary modules: 14 | 15 | ```js title="tests/Counter.spec.js" 16 | import { spy } from "sinon"; 17 | import React from "react"; 18 | import Enzyme, { shallow } from "enzyme"; 19 | import Adapter from "enzyme-adapter-react-16"; 20 | import renderer from "react-test-renderer"; 21 | import Counter from "../../src/components/Counter"; 22 | 23 | Enzyme.configure({ adapter: new Adapter() }); 24 | function setup() { 25 | const actions = { 26 | increment: spy(), 27 | incrementIfOdd: spy(), 28 | incrementAsync: spy(), 29 | decrement: spy(), 30 | }; 31 | const component = shallow(); 32 | return { 33 | component, 34 | actions, 35 | buttons: component.find("button"), 36 | p: component.find(".counter"), 37 | }; 38 | } 39 | ``` 40 | 41 | Now we describe a set of tests with `describe()` and describe the test itself with `it()`: 42 | 43 | ```js title="tests/Counter.spec.js" 44 | // --snip-- 45 | 46 | describe("Counter Component", () => { 47 | it("should match exact snapshot", () => { 48 | const { actions } = setup(); 49 | const counter = ( 50 |
51 | 52 | 53 | 54 |
55 | ); 56 | const tree = renderer.create(counter).toJSON(); 57 | 58 | expect(tree).toMatchSnapshot(); 59 | }); 60 | }); 61 | ``` 62 | 63 | ### Running Tests 64 | 65 | Tests can be run by running `npm test`: 66 | 67 | ```bash 68 | npm test 69 | ``` 70 | 71 | ### Snapshot Tests 72 | 73 | Snapshot tests are probably one of the most powerful features of Jest. With them, you can easily capture the current state of an object and test against that state in future executions of the test. For more details on this, see Jest's [Snapshot Testing docs](https://jestjs.io/docs/en/snapshot-testing). 74 | 75 | After adding a new test to ERB, run `npm test -- -u`. This create a new snapshot if one does not exist already or it will update an existing one. 76 | 77 | ### Watching Tests 78 | 79 | Suppose you are making change to React components and you want to see if components have broken while you are making changes. Running `npm test -- -w` will run tests all the tests that are affected by the changes made to the React components. 80 | -------------------------------------------------------------------------------- /static/logo/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classnames from "classnames"; 3 | import Layout from "@theme/Layout"; 4 | import Link from "@docusaurus/Link"; 5 | import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; 6 | import useBaseUrl from "@docusaurus/useBaseUrl"; 7 | import styles from "./styles.module.css"; 8 | 9 | const features = [ 10 | { 11 | title: <>Faster Iteration: Hot Reloading, 12 | description: ( 13 | <> 14 | Make changes to your app and preview the changes without having to 15 | refresh your app. Changes are made so that the state of your app is not 16 | lost. 17 | 18 | ), 19 | }, 20 | { 21 | title: <>Scalable: Incremental Typing, 22 | description: ( 23 | <> 24 | Bulding scalable apps without types can only go so far. Get type errors 25 | while developing your app. Errors are thrown during compile-time and 26 | runtime 27 | 28 | ), 29 | }, 30 | { 31 | title: <>Performance: Build Optimizations, 32 | description: ( 33 | <> 34 | Optimization and minification of code with webpack comes out of the box. 35 | This avoids running into performance bottlenecks associated with 36 | traditional electron apps 37 | 38 | ), 39 | }, 40 | ]; 41 | 42 | function Feature({ imageUrl, title, description }) { 43 | const imgUrl = useBaseUrl(imageUrl); 44 | return ( 45 |
46 | {imgUrl && ( 47 |
48 | {title} 49 |
50 | )} 51 |

{title}

52 |

{description}

53 |
54 | ); 55 | } 56 | 57 | function Home() { 58 | const context = useDocusaurusContext(); 59 | const { siteConfig = {} } = context; 60 | return ( 61 | 65 |
66 |
67 |

{siteConfig.title}

68 |

{siteConfig.tagline}

69 |
70 | 74 | Get Started 75 | 76 |
77 |
78 |
79 |
80 | {features && features.length && ( 81 |
82 |
83 |
84 | {features.map((props) => ( 85 | 86 | ))} 87 |
88 |
89 |
90 | )} 91 |
92 | 93 | ); 94 | } 95 | 96 | export default Home; 97 | -------------------------------------------------------------------------------- /docs/native-modules.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: native-modules 3 | title: Native Modules 4 | sidebar_label: Native Modules 5 | --- 6 | 7 | This guide covers how to consume native modules. For installing native modules see the [module structure docs](https://electron-react-boilerplate.js.org/docs/adding-dependencies/#module-structure). 8 | 9 | ## What are Native Modules? 10 | 11 | Native node modules are node dependencies that are written in C++, C, or Rust. Native modules may need to be compiled against a specific version of node. If you change your node version then you'll need to recompile your native modules, which will be done automatically on postinstall. 12 | 13 | [electron-rebuild](https://github.com/electron/electron-rebuild) will detect and recompile your native modules against the version of node being used by electron. Changing your electron version will require a recompilation. 14 | 15 | ## Native Modules in electron-react-boilerplate 16 | 17 | Native modules in electron-react-boilerplate have special requirements and are thus handled differently than regular modules. Native modules are problematic when bundled with webpack and so electron-react-boilerplate avoids bundling them -- intead they are treated as [webpack externals](https://webpack.js.org/configuration/externals/). Native modules in electron-react-boilerplate are installed to the `./release/app/node_modules` directory and are copied into your electron app before it is packaged. This allows root dependencies in `./node_modules` (such as webpack, babel, and react) to not be packaged with your app, which significantly app bloat. 18 | 19 | ## Main Process Native Modules 20 | 21 | You can import native modules as usual in the main process as you would other modules. Types for native module dependencies (such as `@types/sqlite`) should be installed to your root `package.json` since they are not required in production. 22 | 23 | ## Renderer Process Native Modules 24 | 25 | Loading remote content in the renderer process with node integration enabled is a security vulnerability and is [discouraged by electron's security documentation](https://www.electronjs.org/docs/tutorial/security#2-do-not-enable-nodejs-integration-for-remote-content). Because of this, node integration is disabled by default. 26 | 27 | Make the following changes to opt in to node integration: 28 | 29 | ```diff title="webpack.config.renderer.prod.ts" 30 | - target: ['web', 'electron-renderer'], 31 | + target: 'electron-renderer', 32 | ``` 33 | 34 | ```diff title="webpack.config.renderer.dev.ts" 35 | - target: ['web', 'electron-renderer'], 36 | + target: 'electron-renderer', 37 | ``` 38 | 39 | ```diff title="webpack.config.renderer.prod.ts" 40 | - library: { 41 | - type: 'umd', 42 | - }, 43 | ``` 44 | 45 | ```diff title="webpack.config.renderer.dev.ts" 46 | - library: { 47 | - type: 'umd', 48 | - }, 49 | ``` 50 | 51 | ```diff title="main.ts" 52 | webPreferences: { 53 | + nodeIntegration: true, 54 | + contextIsolation: false, 55 | - preload: path.join(__dirname, 'preload.js'), 56 | } 57 | ``` 58 | 59 | ```diff title="webpack.config.main.prod.ts" 60 | entry: { 61 | main: path.join(webpackPaths.srcMainPath, 'main.ts'), 62 | - preload: path.join(webpackPaths.srcMainPath, 'preload.js'), 63 | }, 64 | ``` 65 | -------------------------------------------------------------------------------- /docs/integration-tests.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: integration-tests 3 | title: Integration Tests 4 | sidebar_label: Integration Tests 5 | --- 6 | 7 | Integration tests are a way to test the full functionality of the application by simulating the interaction between the application and the user. For Electron applications, this means the browser gets automated. This guide will walk you through the process of writing integration tests with Playwright. 8 | 9 | ## What is Playwright? 10 | 11 | [Playwright](https://playwright.dev) is a framework for writing end-to-end tests, it allows automating Chromium, Firefox, and WebKit with a single API. Since Electron is based on Chromium, Playwright can be used to test Electron as well. Playwright itself provides a whole suite of tools for writing, running and debugging tests. Like an own test-runner `@playwright/test`, [Trace Viewer](https://playwright.dev/docs/trace-viewer) or [Codegen](https://playwright.dev/docs/codegen). 12 | 13 | ## Installing Playwright 14 | 15 | ```bash 16 | npm init playwright@latest 17 | ``` 18 | 19 | This will generate a new Playwright project, including an example test file and a config. 20 | 21 | Since only Electron is getting tested, the `projects` section inside `playwright.config.ts` can be removed. This will result in having a single project by default. 22 | 23 | ### Writing Tests 24 | 25 | Replace the example end-to-end test `e2e/example.spec.ts` with the following: 26 | 27 | ```ts 28 | import { 29 | test, 30 | expect, 31 | _electron as electron, 32 | Page, 33 | ElectronApplication, 34 | } from '@playwright/test'; 35 | import path from 'path'; 36 | 37 | /** 38 | * For Getting started with Playwright, see here: 39 | * @see https://playwright.dev/docs/intro 40 | */ 41 | 42 | test.describe.serial(() => { 43 | let page: Page; 44 | let electronApp: ElectronApplication; 45 | test.beforeAll(async () => { 46 | electronApp = await electron.launch({ 47 | args: [ 48 | path.join(__dirname, '..', 'release', 'app', 'dist', 'main', 'main.js'), 49 | ], 50 | }); 51 | page = await electronApp.firstWindow(); 52 | // Direct Electron console to Node terminal. 53 | page.on('console', console.log); 54 | }); 55 | 56 | test.afterAll(async () => { 57 | await electronApp.close(); 58 | }); 59 | 60 | test('Electron App has the correct buttons on it', async () => { 61 | // Evaluation expression in the Electron context. 62 | const appPath = await electronApp.evaluate(async ({ app }) => { 63 | // This runs in the main Electron process, parameter here is always 64 | // the result of the require('electron') in the main app script. 65 | return app.getAppPath(); 66 | }); 67 | console.log(appPath); 68 | 69 | // Print the title. 70 | console.log(await page.title()); 71 | 72 | await expect(page).toHaveTitle('Hello Electron React!'); 73 | await expect(page.locator('text=📚Read our docs')).toBeVisible(); 74 | await expect(page.locator('text=🙏Donate')).toBeVisible(); 75 | await expect(page.locator('text=electron-react-boilerplate')).toBeVisible(); 76 | }); 77 | }); 78 | ``` 79 | 80 | ## Running Tests 81 | 82 | Tests can be run by running `npx playwright test`: 83 | 84 | ```bash 85 | npx playwright test 86 | ``` 87 | 88 | Make sure to build your Electron application before running the tests (`npm run build`). 89 | 90 | ## More information 91 | 92 | See [here](https://playwright.dev/docs/intro) for Getting Started with Playwright, which is recommended to learn more about best practises, locators, selectors and assertions. 93 | -------------------------------------------------------------------------------- /.proselintrc: -------------------------------------------------------------------------------- 1 | { 2 | "max_errors": 1000, 3 | "checks": { 4 | "phrasal_adjectives.ly" : false, 5 | "preferred_forms" : false, 6 | "airlinese.misc" : true, 7 | "annotations.misc" : false, 8 | "archaism.misc" : true, 9 | "cliches.hell" : true, 10 | "cliches.misc" : true, 11 | "consistency.spacing" : true, 12 | "consistency.spelling" : true, 13 | "corporate_speak.misc" : true, 14 | "cursing.filth" : true, 15 | "cursing.nfl" : false, 16 | "cursing.nword" : true, 17 | "dates_times.am_pm" : true, 18 | "dates_times.dates" : true, 19 | "hedging.misc" : true, 20 | "hyperbole.misc" : false, 21 | "jargon.misc" : true, 22 | "lexical_illusions.misc" : true, 23 | "links.broken" : false, 24 | "malapropisms.misc" : true, 25 | "misc.apologizing" : true, 26 | "misc.back_formations" : true, 27 | "misc.bureaucratese" : true, 28 | "misc.but" : false, 29 | "misc.capitalization" : true, 30 | "misc.chatspeak" : true, 31 | "misc.commercialese" : true, 32 | "misc.composition" : true, 33 | "misc.currency" : true, 34 | "misc.debased" : true, 35 | "misc.false_plurals" : true, 36 | "misc.illogic" : true, 37 | "misc.inferior_superior" : true, 38 | "misc.latin" : true, 39 | "misc.many_a" : true, 40 | "misc.metaconcepts" : true, 41 | "misc.metadiscourse" : true, 42 | "misc.narcissism" : true, 43 | "misc.not_guilty" : true, 44 | "misc.phrasal_adjectives" : false, 45 | "misc.preferred_forms" : false, 46 | "misc.pretension" : true, 47 | "misc.professions" : true, 48 | "misc.punctuation" : true, 49 | "misc.scare_quotes" : true, 50 | "misc.suddenly" : true, 51 | "misc.tense_present" : true, 52 | "misc.waxed" : true, 53 | "misc.whence" : true, 54 | "mixed_metaphors.misc" : true, 55 | "mondegreens.misc" : true, 56 | "needless_variants.misc" : true, 57 | "nonwords.misc" : true, 58 | "oxymorons.misc" : true, 59 | "psychology.misc" : true, 60 | "redundancy.misc" : true, 61 | "redundancy.ras_syndrome" : true, 62 | "skunked_terms.misc" : true, 63 | "spelling.able_atable" : true, 64 | "spelling.able_ible" : true, 65 | "spelling.athletes" : true, 66 | "spelling.em_im_en_in" : true, 67 | "spelling.er_or" : true, 68 | "spelling.in_un" : true, 69 | "spelling.misc" : true, 70 | "security.credit_card" : true, 71 | "security.password" : true, 72 | "sexism.misc" : true, 73 | "terms.animal_adjectives" : true, 74 | "terms.denizen_labels" : true, 75 | "terms.eponymous_adjectives" : true, 76 | "terms.venery" : true, 77 | "typography.diacritical_marks" : true, 78 | "typography.exclamation" : false, 79 | "typography.symbols" : false, 80 | "uncomparables.misc" : true, 81 | "weasel_words.misc" : true 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /docs/app-showcase.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: app-showcase 3 | title: App Showcase 4 | sidebar_label: App Showcase 5 | --- 6 | 7 | Here are some awesome apps that are based on Electron React Boilerplate! 8 | 9 | ## Command E 10 | 11 | ![command e](/img/app-showcase/cmde.png) 12 | 13 | Instantly find everything you need to work faster, on your desktop and across your cloud apps. 14 | 15 | [Link](https://getcommande.com) 16 | 17 | ## Popcorn Time Desktop (Open Source) 18 | 19 | [Link](https://github.com/amilajack/popcorn-time-desktop) 20 | 21 | [**A Modern and Experimental Popcorn Time Client**](https://github.com/amilajack/popcorn-time-desktop) 22 | 23 | ![popcorn time desktop](/img/app-showcase/popcorn-time-desktop.png) 24 | 25 | ## Recollector (Company) 26 | 27 | [Link](https://recollectr.io) 28 | 29 | [**A minimally disruptive and maximally efficient note taking app**](https://recollectr.io) 30 | 31 | ![recollector](/img/app-showcase/recollector.png) 32 | 33 | ## Upnotes 34 | 35 | [Link](https://upnotes.io) 36 | 37 | [**A markdown first notes app for coders**](https://upnotes.io) 38 | 39 | ![image](https://user-images.githubusercontent.com/5221843/143382567-be2c94f9-0067-4f3d-90ce-3b54b2591dd1.png) 40 | 41 | ## Falcon (Open Source) 42 | 43 | [Link](https://github.com/falcon-client/falcon) 44 | 45 | [**A (experimental) fast, modern, and extenable database client for SQLite**](https://github.com/falcon-client/falcon) 46 | 47 | ![falcon](/img/app-showcase/falcon.png) 48 | 49 | ## DBGlass (Open Source) 50 | 51 | [Link](https://github.com/web-pal/DBGlass) 52 | 53 | [**A cross-platform PostgreSQL client**](https://github.com/web-pal/DBGlass) 54 | 55 | ![dbglass](/img/app-showcase/dbglass.jpg) 56 | 57 | ## PopSQL (Company) 58 | 59 | [Link](https://popsql.io) 60 | 61 | [**Modern, collaborative SQL editor for your team**](https://popsql.io) 62 | 63 | ![popsql](/img/app-showcase/popsql.gif) 64 | 65 | ## Channels (Open Source) 66 | 67 | [Link](https://github.com/BuckyMaler/channels) 68 | 69 | [**The Mac App for YouTube Channels**](https://github.com/BuckyMaler/channels) 70 | 71 | ![channels](/img/app-showcase/channels.jpg) 72 | 73 | ## Timesheets (Open Source) 74 | 75 | [Link](https://github.com/hardchor/timesheets) 76 | 77 | [**Timesheets is an app that makes time tracking incredibly easy**](https://github.com/hardchor/timesheets) 78 | 79 | ## Truly Wireless (Company) 80 | 81 | [Link](https://truly.co) 82 | 83 | [**Cross-platform VoIP client for businesses**](https://truly.co) 84 | 85 | ## ivideo (Open Source) 86 | 87 | [Link](https://github.com/phobal/ivideo) 88 | 89 | [**A client that can watch video of domestic(China) mainstream video platform**](https://github.com/phobal/ivideo) 90 | 91 | ## GDLauncher (Open Source) 92 | 93 | [Link](https://github.com/gorilla-devs/GDLauncher) 94 | 95 | [**A Minecraft custom launcher with a strong focus on the user experience**](https://github.com/gorilla-devs/GDLauncher) 96 | 97 | ## Vocab (by [Financial Times](https://www.ft.com)) (Open Source) 98 | 99 | [Link](https://github.com/ft-interactive/vocab) 100 | 101 | [**Rapidly scaffold out visual-vocabulary projects**](https://github.com/ft-interactive/vocab) 102 | 103 | ## ExpressLRS Configurator (Open Source) 104 | 105 | [Link](https://github.com/ExpressLRS/ExpressLRS-Configurator) 106 | 107 | [**A tool to build & flash ExpressLRS RC Link firmware**](https://github.com/ExpressLRS/ExpressLRS-Configurator) 108 | 109 | ![ExpressLRS Configurator](/img/app-showcase/expresslrs-configurator.jpg) 110 | 111 | ## Left on Read (Open Source) 112 | 113 | [Link](https://github.com/Left-on-Read/leftonread) 114 | 115 | [**Analytics and productivity tools for your iMessages**](https://leftonread.me/) 116 | 117 | ![leftonread](/img/app-showcase/left-on-read.gif) 118 | -------------------------------------------------------------------------------- /docusaurus.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: "Electron React Boilerplate", 3 | tagline: "A Foundation for Scalable Cross-Platform Apps", 4 | url: "https://electron-react-boilerplate.js.org/", 5 | baseUrl: "/", 6 | favicon: "logo/logo.png", 7 | organizationName: "electron-react-boilerplate", 8 | projectName: "site", 9 | trailingSlash: false, 10 | themeConfig: { 11 | announcementBar: { 12 | id: "palette_banner", 13 | content: 14 | 'Try Palette - Electron Performance, made easy', 15 | isCloseable: false, 16 | }, 17 | colorMode: { 18 | defaultMode: "light", 19 | disableSwitch: true, 20 | respectPrefersColorScheme: true, 21 | }, 22 | hideOnScroll: true, 23 | navbar: { 24 | title: "Electron React Boilerplate", 25 | logo: { 26 | alt: "ERB Logo", 27 | src: "logo/logo.png", 28 | }, 29 | items: [ 30 | { to: "docs/installation", label: "Docs", position: "left" }, 31 | { to: "docs/app-showcase", label: "Showcase", position: "left" }, 32 | { to: "docs/roadmap", label: "Roadmap", position: "left" }, 33 | { 34 | position: "left", 35 | href: "http://github.com/electron-react-boilerplate/examples#table-of-contents", 36 | label: "Examples", 37 | }, 38 | { 39 | position: "left", 40 | href: "http://github.com/electron-react-boilerplate/electron-react-boilerplate", 41 | label: "GitHub", 42 | }, 43 | { 44 | position: "left", 45 | href: "https://opencollective.com/electron-react-boilerplate-594", 46 | label: "Donate", 47 | }, 48 | { to: "blog", label: "Blog" }, 49 | ], 50 | }, 51 | footer: { 52 | links: [ 53 | { 54 | title: "Docs", 55 | items: [ 56 | { 57 | label: "Getting Started", 58 | to: "docs/installation", 59 | }, 60 | ], 61 | }, 62 | { 63 | title: "Community", 64 | items: [ 65 | { 66 | label: "Showcase", 67 | to: "docs/app-showcase", 68 | }, 69 | { 70 | label: "Community Chat", 71 | to: "https://github.com/electron-react-boilerplate/electron-react-boilerplate/discussions", 72 | }, 73 | { 74 | label: "Twitter", 75 | to: "https://twitter.com/eBoilerplate", 76 | }, 77 | { 78 | label: "Blog", 79 | to: "blog", 80 | }, 81 | ], 82 | }, 83 | { 84 | title: "More", 85 | items: [ 86 | { 87 | label: "GitHub", 88 | to: "https://github.com/electron-react-boilerplate/electron-react-boilerplate", 89 | }, 90 | ], 91 | }, 92 | ], 93 | copyright: `Copyright © ${new Date().getFullYear()} Electron React Boilerplate`, 94 | }, 95 | algolia: { 96 | // "Search only api key". Safe to keep this public 97 | apiKey: "153d0c8921fcb9addaf1807f8899486d", 98 | indexName: "electron-react-boilerplate", 99 | appId: "6C92C9G1ZT", 100 | contextualSearch: true, 101 | }, 102 | }, 103 | scripts: [ 104 | { 105 | src: "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js", 106 | async: true, 107 | }, 108 | ], 109 | presets: [ 110 | [ 111 | "@docusaurus/preset-classic", 112 | { 113 | docs: { 114 | sidebarPath: require.resolve("./sidebars.js"), 115 | editUrl: 116 | "https://github.com/electron-react-boilerplate/site/edit/main", 117 | }, 118 | theme: { 119 | customCss: require.resolve("./src/css/custom.css"), 120 | }, 121 | googleAnalytics: { 122 | trackingID: "UA-127797742-1", 123 | }, 124 | gtag: { 125 | trackingID: "UA-127797742-1", 126 | }, 127 | }, 128 | ], 129 | ], 130 | }; 131 | -------------------------------------------------------------------------------- /docs/ci.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ci 3 | title: Continuous Integration (CI) 4 | sidebar_label: Continuous Integration (CI) 5 | --- 6 | 7 | All the following configurations work with electron-react-boilerplate. 8 | 9 | import Tabs from '@theme/Tabs'; 10 | import TabItem from '@theme/TabItem'; 11 | 12 | 21 | 22 | 23 | ```yml 24 | matrix: 25 | include: 26 | - os: osx 27 | language: node_js 28 | node_js: 29 | - node 30 | env: 31 | - ELECTRON_CACHE=$HOME/.cache/electron 32 | - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder 33 | - os: linux 34 | language: node_js 35 | node_js: 36 | - node 37 | services: 38 | - xvfb 39 | addons: 40 | apt: 41 | sources: 42 | - sourceline: "ppa:ubuntu-toolchain-r/test" 43 | packages: 44 | - gcc-multilib 45 | - g++-8 46 | - g++-multilib 47 | - icnsutils 48 | - graphicsmagick 49 | - xz-utils 50 | - xorriso 51 | - rpm 52 | 53 | before_cache: 54 | - rm -rf $HOME/.cache/electron-builder/wine 55 | 56 | cache: 57 | directories: 58 | - node_modules 59 | - $(npm config get prefix)/lib/node_modules 60 | - $HOME/.cache/electron 61 | - $HOME/.cache/electron-builder 62 | 63 | before_install: 64 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then export CXX="g++-8"; fi 65 | 66 | install: 67 | - npm ci 68 | # On Linux, initialize "virtual display". See before_script 69 | - | 70 | if [ "$TRAVIS_OS_NAME" == "linux" ]; then 71 | /sbin/start-stop-daemon \ 72 | --start \ 73 | --quiet \ 74 | --pidfile /tmp/custom_xvfb_99.pid \ 75 | --make-pidfile \ 76 | --background \ 77 | --exec /usr/bin/Xvfb \ 78 | -- :99 -ac -screen 0 1280x1024x16 79 | else 80 | : 81 | fi 82 | 83 | before_script: 84 | # On Linux, create a "virtual display". This allows browsers to work properly 85 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then export DISPLAY=:99.0; fi 86 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sleep 3; fi 87 | 88 | script: 89 | - npm run package 90 | - npm run lint 91 | - npm test 92 | - npm test-e2e 93 | 94 | ``` 95 | 96 | 97 | 98 | 99 | 100 | ```yml 101 | strategy: 102 | matrix: 103 | linux: 104 | imageName: "ubuntu-16.04" 105 | nodeVersion: "13.x" 106 | mac: 107 | imageName: "macos-10.14" 108 | nodeVersion: "13.x" 109 | windows: 110 | imageName: "windows-2019" 111 | nodeVersion: "13.x" 112 | 113 | pool: 114 | vmImage: $(imageName) 115 | 116 | steps: 117 | # Set node version 118 | - task: NodeTool@0 119 | inputs: 120 | versionSpec: $(nodeVersion) 121 | # Start virtual framebuffer server 122 | - bash: | 123 | /usr/bin/Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & 124 | echo ">>> Started xvfb" 125 | displayName: Start xvfb 126 | condition: and(succeeded(), eq(variables['Agent.OS'], 'Linux')) 127 | # Install deps and run tests 128 | - script: npm ci && npm test-all 129 | env: 130 | DISPLAY: ":99.0" 131 | # Generate coverage report 132 | - script: npm test --coverage --coverageReporters=cobertura 133 | # Publish coverage report 134 | - task: PublishCodeCoverageResults@1 135 | inputs: 136 | codeCoverageTool: Cobertura 137 | summaryFileLocation: $(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml 138 | ``` 139 | 140 | 141 | 142 | 143 | 144 | ```yml 145 | name: Test 146 | 147 | on: push 148 | 149 | jobs: 150 | release: 151 | runs-on: ${{ matrix.os }} 152 | 153 | strategy: 154 | matrix: 155 | os: [macos-10.14, windows-2019, ubuntu-18.04] 156 | 157 | steps: 158 | - name: Check out Git repository 159 | uses: actions/checkout@v1 160 | 161 | - name: Install Node.js and NPM 162 | uses: actions/setup-node@v1 163 | with: 164 | node-version: 13 165 | 166 | - name: npm install 167 | run: | 168 | npm install 169 | 170 | - name: npm test 171 | env: 172 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 173 | run: | 174 | npm run package-ci 175 | npm run lint 176 | npm run ts 177 | 178 | # Failing beacuse virtual framebuffer not installed 179 | # npm run build-e2e 180 | # npm test-e2e 181 | ``` 182 | 183 | 184 | 185 | 186 | 187 | ```java 188 | image: Visual Studio 2017 189 | 190 | platform: 191 | - x64 192 | 193 | environment: 194 | matrix: 195 | - nodejs_version: 13 196 | 197 | cache: 198 | - node_modules 199 | - release/app/node_modules 200 | - '%USERPROFILE%\.electron' 201 | 202 | matrix: 203 | fast_finish: true 204 | 205 | build: off 206 | 207 | version: '{build}' 208 | 209 | shallow_clone: true 210 | 211 | clone_depth: 1 212 | 213 | install: 214 | - ps: Install-Product node $env:nodejs_version x64 215 | - set CI=true 216 | - npm ci 217 | 218 | test_script: 219 | - npm run package 220 | - npm run lint 221 | - npm test 222 | - npm test-e2e 223 | 224 | ``` 225 | 226 | 227 | 228 | -------------------------------------------------------------------------------- /docs/styling.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: styling 3 | title: Styling 4 | sidebar_label: Styling 5 | --- 6 | 7 | Electron React Boilerplate supports CSS, SCSS, CSS and modules out of the box. 8 | 9 | ## CSS 10 | 11 | To import css you can import it like a regular module: 12 | 13 | ```ts 14 | import "./style.css"; 15 | // ... 16 | ``` 17 | 18 | ### Importing CSS 19 | 20 | Say you want to import css file from font-awesome module. Use following syntax: 21 | 22 | ```css 23 | @import "~font-awesome/css/font-awesome.css"; 24 | ``` 25 | 26 | Note the tilde `~` placed before module name. 27 | 28 | The import css from all your modules will be concatenated into a single css file that will be injected into the header at build time. 29 | 30 | ## CSS Modules 31 | 32 | CSS modules allow you to scope styles. Files must be end with `*.module.{css,sass,scss}` if they are to be recognized as a css module. Here is an example: 33 | 34 | ```ts 35 | import styles from "./Button.module.css"; 36 | 37 | const Button = () =>