💅 A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier, GitHub Action releases and more.

Overview

Electron App

💅  A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier, GitHub Action releases and more.

patreon url releases url license url

preview

Features

  • Stands out
    • 🔥  Ready-to-go with a well-thought-out structure
    • 🚀  Auto reload for main and Hot for renderer process
    • 🎉  Window and Screen routing included
    • 😎  Bridge already configured
    • 🙀  IPC communication included
    • 🔮  GitHub Action releases with Windows, Mac and Linux binaries
    • 🍪  Absolute paths supported
  • Technologies:
    • 🔋  Electron
    • 🔥  ReactJS
    • 🌎  React Router DOM
    • 🧐  React Developer Tools
    • 💙  TypeScript
    • 📦  Webpack
    • ⚡️  SWC as compiler
    •  CSS / SASS modules
    • 💫  Eslint / Prettier / EditorConfig / Husky / lint-staged / Commitlint
    • 📦  Electron Builder
    • 🔮  action-electron-builder

Usage

First, install the dependencies by running on the terminal:

yarn

That done, just run the project with the following command:

yarn dev

Now, look at the app.config.js file in the root directory, you should update some of that settings with your project branding, also you may notice some of that settings comes from the package.json, update it too as you need.

Distribution

For all platforms

Check Electron Builder docs

yarn dist

For a specific one

yarn dist --mac
# OR
yarn dist --win
# OR
yarn dist --linux

The compiled apps will be available on the dist folder.

Releasing

🔥  Note: To be able to perform auto-updates you will need a code signed app, for this purpose you will need to configure it by yourself, so check the electron-builder and action-electron-builder docs please to get know how to do this.

To release your app on a GitHub release with Windows, Mac and Linux binaries, you can perform the following commands:

git pull
yarn make:release

Then, enter the new version of your app, so it will produce the following binaries in a draft release from the action:

  • Windowszip (portable), .exe
  • Mac.zip (app), .dmg
  • LinuxAppImage, freebsd, pacman, rpm, deb

In this process, the action will be triggered and the previous command will open the releases and actions page in your browser. When the action is finished, you can click in the releases page and refresh it to see the draft release with the binaries, so you can edit it and release it for your users.

demo.mp4

Documents



Creating Windows



Routing



Structure Overview



FAQ - Frequently Asked Questions

Contributing

Contributions are always welcome, but always ask first, — please — before work on a PR.

That said, there's a bunch of ways you can contribute to this project, like by:

  • 🪲  Reporting a bug
  • 📄  Improving this documentation
  • 🚨  Sharing this project and recommending it to your friends
  • 💵  Supporting this project on Patreon
  • 🌟  Giving a star on this repository

License

MIT © Dalton Menezes

You might also like...

A template for your NestJS projects including Typescript, Eslint, Prettier, Jest and Docker.

A template for your NestJS projects including Typescript, Eslint, Prettier, Jest and Docker.

NestJS Template Quickly start a new NestJS project A template for your NestJS projects including Typescript, Eslint, Prettier, Jest and Docker. ⏩ Gett

Oct 7, 2022

A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Docker.

A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Docker.

Next.js Template Quickly start a new Next.js project A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Do

Oct 7, 2022

A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker.

A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker.

Node.js Template Quickly start a new Node.js project A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker. ⏩ G

Oct 12, 2022

Repository for the LogRocket meetup: Configuring ESLint And Prettier For TypeScript. ✨

logrocket-eslint-prettier-typescript ✨ Configuring ESLint And Prettier For TypeScript ✨ Join Josh Goldberg on October 21st at 2 p.m. EDT and learn how

Dec 21, 2022

Quickly bootstrap your next TypeScript REST API project. Node 16+, auto OpenAPI, Prettier+ESLint, Jest

REST API template with autogenerated OpenAPI Quickly bootstrap your next TypeScript REST API project with the most up to date template. Included a sam

Oct 1, 2022

Library to download binary files from GitHub releases detecting the correct platform.

Dbin TypeScript library to download binary files from GitHub releases detecting the correct platform. Example: import dbin from "https://deno.land/x/d

Oct 4, 2022

SWC plugin for transforming import path.

swc-plugin-transform-import Inspired from babel-plugin-transform-imports Installation npm i -D swc-plugin-transform-import Uses with webpack-config //

Dec 24, 2022

convert SWC to Babel AST

SWC-to-babel Convert SWC JavaScript AST to Babel AST. To use SWC parser with babel tools like: @babel/traverse @babel/types etc... The thing is @babel

Oct 28, 2022

Storybook add-on to enable SWC builds.

storybook-addon-swc Storybook addon that improves build time by building with swc. 🗒 Examples webpack4 webpack5 🚀 Installation $ npm install -D stor

Dec 20, 2022
Comments
  • 'yarn dist' is not working

    'yarn dist' is not working

    Steps

    1. clone repo
    2. yarn
    3. yarn dev - make sure app works - it does
    4. yarn dist - executes correctly but no dist folder created in project folder. (per the README) From package.json and electron-builder.js configurations it seems this is the path its going to drop the build at. "devTempBuildFolder": "./node_modules/.dev-temp-build",
      But I don't see dist folder there either.

    image

    opened by daskabe 8
  • feat: v2.0.0 🎉

    feat: v2.0.0 🎉

    Some of the major changes:

    • Removes webpack in favor of Electron Vite turning the dev experience better and faster
    • Updates the app to use electron-router-dom improving the routing system dev experience
    • Updates the app structure
    • Updates bridge folder name to preload and move it to src folder
    • Updates deps
    • Updates electron-build.js to build on dist/{version} folder, keeping the builds from previous versions
    • Adds the appId on Windows
    • Removes unnecessary deps
    • Removes app.config.js
    opened by daltonmenezes 0
  • feat: v1.2.0 🎉

    feat: v1.2.0 🎉

    This PR:

    • Adds
      • makeAppWithSingleInstanceLock and use it by default
    • Fixes
      • execution in dev on Windows
    • Updates
      • makeAppSetup to deal with windows as promises by default
      • MainWindow to be async
      • renderer.config.js to expose process.platform on renderer as well
      • Electron to v18.2.0
      • Electron Builder to v.23.0.3
      • @swc/cli to v0.1.57
      • @swc/core to v1.2.179
      • swc-loader to v0.2.0
      • webpack to v5.72.0
      • webpack-dev-server to v4.9.0
    enhancement 
    opened by daltonmenezes 0
  • feat: release v1.1.0 🎉

    feat: release v1.1.0 🎉

    This PR:

    • Adds support for generating draft release from GH Action with dist files
    • Adds a CLI helper to make the releases intuitively by performing yarn make:release

    Preview

    https://user-images.githubusercontent.com/1149845/156939675-5ea0c510-ddd3-4de7-b293-87d3697bd1a8.mp4

    enhancement 
    opened by daltonmenezes 0
Releases(v2.0.3)
Owner
Dalton Menezes
Developer and Instructor at @Rocketseat
Dalton Menezes
TS & JS Library for adaptive precision cursor for the web. Releases will come out soon! Meanwhile, check out the demo site:

Haha, cool cursor go brrrr... Table of Content What is this? Installation & Setup Installation Setup Usage Cursor controls Element settings Known issu

LemonOrange 10 Nov 24, 2022
A boilerplate for ExpressJs projects configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses Mongodb.

ExpressJs-Boilerplate An ExpressJs boilerplate configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses

Hammas bin Farrukh 4 Mar 8, 2023
A Nextjs-Typescript boilerplate , configured with Tailwindcss, Eslint, Prettier, Lint-staged ,Husky and commitizen

Minimal Nextjs Typescript boilerplate A Minimal Next-Typescript boilerplate to quickly and easily bootstrap your next project. Comes pre-configured wi

TEYIM ASOBO 3 Nov 4, 2022
NoExGen is a node.js express application generator with modern folder structure, namespace/project mapping and much more! It contains preconfigured Settings and Routing files, ready to be used in any project.

Installation $ npm install -g noexgen Quick Start You can use Node Package Execution to create your node-express application as shown below: Create th

Souvik Sen 7 Oct 8, 2022
Rollup + Babel + Prettier + Strict ESlint + VSCode - Enterprise grade boilerplate

Javascript package boilerplate by HackingBay Rollup + Babel + Prettier + Strict ESlint + VSCode - Enterprise grade boilerplate Minimalist js package b

HackingBay 1 Dec 28, 2021
Erick Hans 5 Oct 26, 2022
💻 A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools.

⚡ Next Typescript Template ⚡ A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools. Quic

João Gabriel 13 Nov 23, 2022
vite-react-typescript with eslint and prettier predefined settings

Vite + React + Typescript + Eslint + Prettier A starter for React with Typescript with the fast Vite and all static code testing with Eslint and forma

The Sword Breaker 315 Dec 30, 2022
Create a new project with Next.js, TypeScript, Eslint, Prettier in just 1 second and you don't need to setup anything.

Next + TypeScript + Eslint + Prettier Template ?? Create a new project with Next.js, TypeScript, Eslint, Prettier in just 1 second and you don't need

Hung Minh 11 Oct 2, 2022
TypeScript + Nextjs + Tailwind => TNT🧨 (plus Prettier and ESLint configuration).

Bye bye next boilerplate, welcome to TNT! About This is TNT, Nextjs boilerplate powered by Typescript, Tailwind. This template also has customized ESL

Arvîn mostafaei 15 Aug 7, 2022