Have ideas to improve npm?Join in the discussion! »

    cra-template-ts-electron-react-eslint-prettier-airbnb

    0.2.2 • Public • Published

    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

    Install

    npm i cra-template-ts-electron-react-eslint-prettier-airbnb

    DownloadsWeekly Downloads

    1

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    63.6 kB

    Total Files

    40

    Last publish

    Collaborators

    • avatar