cra-template-simple-electron v1.0.2
cra-template-simple-electron
This is a very simple create-react-app (CRA) template for Electron applications based on the official base template for Create React App.
By default, React App as the renderer is located in src directory, and the main world is located in main directory. Due to changes build target, the React App may not run properly in browsers, you should develop your applications in Electron.
Getting Started
To create an Electron application, you need run:
npx create-react-app my-app --template simple-electronTo start in dev mode, you need run:
npm startElectron will start while dev server is on and renderer content is ready. Devtools for React will be automaticly installed before Electron loads content. You may use more development tools in Electron developer tools by adding more devtools declarations in index.js.
DO NOT run
npm run start:rendererdirectly, React APP will fail to load in browsers.
Distribution
This template uses electron-builder to package a ready to distribute application.
To distribute the application, run follow commands:
# For windows
npm run dist:win
# For macOS
npm run dist:mac
# For Linux
npm run dist:linuxBy default, packaged application will be placed in dist directory. Remember to change the author, description, build.appId and build.productName in package.json before creating a distribution.
Troubleshooting
React APP is not load, console says
require() is not defined, but not onpreload.js.You maybe disabled
nodeIntegrationinwebPreferences. Remember, Webpack needrequire(). In another case, you may set Webpack's target toelectron-renderer, that will also make Electron reportrequire is not definedwhennodeIntegrationisfalse.I got 'Electron failed to install correctly'.
Run
npm run fix:electronto redownload Electron module.
Special Thanks
This template uses many tools to help developing.