cra-template-ts-electron-react-eslint-prettier-airbnb
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
- Recoil
- 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
generate-react-cli npx executable
- lint-staged with Husky to keep your commit cleans and error-free
Requirements
- Node.js 12.16.3 or greater
- npm 6.14.4 or greater
- yarn 1.22.10 or greater
Installation
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.
Adding Components
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
Custom Paths
Paths are defined in two places:
- ./tsconfig.paths.js
- ./config/config-overrides.js
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
@import "@/lib/scss/_master";
Did you like this template?
Support my work by donating any value in dogecoin in this url :)
https://dogechain.info/address/DFKcaAVmda9jTL59CBamSHEcYytXhd8Q2G
