What it is?
An All-in-one template to create Electron applications with Create React App. The template includes:
- TypeScript 4.1.2
- React 17 with react-app-rewired and react-app-rewire-aliases to allow path aliases in webpack
- ESLint & Prettier with AirBnB Settings
- Support for SASS/SCSS files
- StyleLint to clean up and format SASS/SCSS stylesheets
- Electron 11 with electron-forge operations to build and develop executable files
- Support for
- lint-staged with Husky to keep your commit cleans and error-free
- Node.js 12.16.3 or greater
- npm 6.14.4 or greater
- yarn 1.22.10 or greater
Use create-react-app and run the provided template:
$ npx create-react-app my_new_app --template cra-template-ts-electron-react-eslint-prettier-airbnb
Developing with Electron
To start developing use
yarn start so it will execute the compilation of the electron main process and the development server from create-react-app. after the build is complete, electron-forge will load the application on the browser.
Important Note: The first time you run
yarn start will take a while since electron-forge needs to initialize all the electron framework in your project.
After the application starts, you are free to close the electron window and start to develop your application.
Take advantage of the current
generate-react-cli.json to generate components on the fly. To generate a new component run in your terminal
$ yarn add:component MyNewComponent
Paths are defined in two places:
As an example, I have left a custom path called
@ so you can invoke your scripts and stylesheets without going nuts. Example:
import MyNewComponent from `@/Components/MyNewComponent`;
or in SCSS
Did you like this template?
Support my work by donating any value in dogecoin in this url :)