Looking for a typescript version ? Check out the original creator of this boilerplate at cra-lerna-electron
Minimal starter kit: ⚛️ create-react-app
+ 🐉 Lerna
+
Electron
+ ES6 (2019)
# Fetch this repo
git clone https://github.com/ganzf/cra-lerna-electron-es6 my-app
cd my-app
# Bootstrap the Lerna project, will install all modules
yarn install
The main idea of this starer kit is to separate the Electron and React parts, as well as having packages for common modules, react components and an ES6 compatible express server.
.
├── lerna.json # Config for Lerna
├── package.json # Package.json for the whole repo
├── packages/
│ ├── crale-electron/
│ │ ├── electron-builder.json # Config for electron-build
│ │ ├── electron-webpack.json # Config for electron-webpack
│ │ ├── dist/ # Binaries bundles by electron-builder
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── main/ # Your electron app goes here
│ │ ├── static/ # Symlinks to ../crale-desktop/build/ folder
│ ├── crale-desktop
│ │ ├── build/ # The built app generated by CRA to be used with Electron
│ │ ├── package.json
│ │ ├── src/ # Your react app goes here
│ ├── crale-web # Your react web application (not included in electron)
│ │ ├── ...
│ ├── crale-server # Your ES6 express server
│ │ ├── ...
│ ├── crale-commons # Your common code (used in any other es6 package) goes here
│ │ ├── ...
│ ├── crale-components # Your react components, used in your webapp and your desktop app
│ │ ├── ...
│ ├── storybook # Your react components storybook
│ │ ├── ...
All these commands should be run from the project root.
Command | Description |
---|---|
yarn start |
Run Electron and React in dev mode, with live reload on file changes. Allows fast iterations. |
yarn build |
Build Electron and React apps. |
yarn clean |
Clean your build and dist directories. |
yarn electron |
Build Electron and React, and open Electron with these built files. |
yarn package |
Build Electron and React, and generate binaries with these built files. |
yarn lint |
Check for linting issues in the code. |
yarn lint-fix |
Auto fix some linter errors. |
yarn test |
Run tests. |
yarn storybook |
Open the storybook component showcase. |
For the exhaustive list of available commands, check package.json
.
Tool | Description |
---|---|
create-react-app |
All tooling needed for React apps. |
lerna |
Manage JavaScript projects with multiple packages. |
electron-webpack |
Scripts and configurations to compile Electron applications using webpack. |
electron-builder |
A complete solution to package and build a ready for distribution Electron app. |
storybook |
A complete solution to showcase react components |
rimraf |
A cross platform removal tool |
MIT.