electron-app - GitLite

KO | EN

gitlite — search

#python #react #ai #typescript #go #deep-learning #java #cli #awesome-list #security #pytorch #mcp #ios #open-source

electron-app

(★ 807)

💅 An Electron app boilerplate with React 19, TypeScript 5, Tailwind 4, shadcn/ui, Electron Vite, Biome, GitHub Action releases and more.

File Explorer

Download Latest Version (.zip)

- FUNDING.yml
- - bullet.svg
  - preview.png
- FAQ.md
- RELEASING.md
- SOURCE_CODE_PROTECTION.md
- STRUCTURE.md
- THEMING.md
- UNSIGNED_APPS.md
- - extensions.json
  - settings.json
- .editorconfig
- .gitignore
- .npmrc
- .nvmrc
- biome.json
- components.json
- electron-builder.ts
- electron.vite.config.ts
- index.d.ts
- package.json
- trusted-dependencies-scripts.json
- tsconfig.json
.gitignore
LICENSE
README.md

# Installation Guide

1. Get the code

git clone https://github.com/daltonmenezes/electron-app

Downloads the entire project code from GitHub to your computer.

cd electron-app

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

pnpm install

Downloads and installs the libraries listed in package.json.

pnpm dev

Starts the development/run server.

pnpm build

Type this command into your terminal and run it.

pnpm build --mac

Type this command into your terminal and run it.

pnpm build --win

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center"><img src="https://raw.githubusercontent.com/daltonmenezes/electron-app/refs/heads/main/docs/images/bullet.svg" width="19" /> Electron App</h1>

<p align="center">💅 An Electron app boilerplate with React v19, TypeScript v5, Tailwind v4, shadcn/ui, Electron Vite, Biome, <strong>GitHub Action releases</strong> and more.
  <br/><br/>
   
  <a href="https://github.com/sponsors/daltonmenezes">
    <img alt="github url" src="https://img.shields.io/badge/support%20on-github-1C1E26?style=for-the-badge&labelColor=1C1E26&color=F28BA9"/>
  </a>
  
  <a href="https://www.patreon.com/daltonmenezes">
    <img alt="patreon url" src="https://img.shields.io/badge/support%20on-patreon-1C1E26?style=for-the-badge&labelColor=1C1E26&color=B181F1"/>
  </a>
  
  <a href="https://github.com/daltonmenezes/electron-app/releases">
     <img alt="releases url" src="https://img.shields.io/github/v/release/daltonmenezes/electron-app?style=for-the-badge&labelColor=1C1E26&color=61ffca"/>
  </a>  
  
  <a href="https://github.com/daltonmenezes/electron-app/blob/main/LICENSE">
    <img alt="license url" src="https://img.shields.io/badge/license%20-MIT-1C1E26?style=for-the-badge&labelColor=1C1E26&color=F28BA9"/>
  </a>
</p>

<p align="center">
  <a href="#electron-app">
    <img alt="preview" src="./docs/images/preview.png" >
  </a>
</p>

# <img src="https://raw.githubusercontent.com/daltonmenezes/electron-app/refs/heads/main/docs/images/bullet.svg" width="19" /> Features
- **Stands out**
  - 🔥 Fast and Ready-to-go with a well-thought-out structure
  - 🚀 Auto reload for main and **Fast Refresh** for renderer process
  - 🎉 Window/Screen routing included
  - 😎 Preload (context bridge) already configured
  - 🔮 GitHub Action releases with `Windows`, `Mac` and `Linux` binaries
  - 🔒 Source Code Protection support
  - 🍪 Absolute paths support
- **Technologies**:
  - 🔋 Electron
  - 🔥 ReactJS v19
  - 🌎 React Router DOM v7 and Electron Router DOM v2
  - 🧐 React Developer Tools
  - 🔍 Code inspector (holding <kbd title="Alt">`Alt`</kbd> or <kbd title="Alt">`Option`</kbd> key on DOM element and clicking on it)
  - 💙 TypeScript v5
  - 📦 Electron Vite
  - ✨ TailwindCSS v4
  - 🎨 shadcn/ui
  - 🍦 lucide-icons
  - 💫 Biome / EditorConfig
  - 📦 Electron Builder
  - 🔮 action-electron-builder

<br/>

> :warning: If **Windows 7** and **8** support is important for your project, you should know that Electron in a version greater than 22x no longer supports it. You can read more about it [here](https://www.electronjs.org/docs/latest/breaking-changes#removed-windows-7--8--81-support). Therefore, you must downgrade Electron to 22x version if it's important for you!

# <img src="https://raw.githubusercontent.com/daltonmenezes/electron-app/refs/heads/main/docs/images/bullet.svg" width="19" /> Requirements
- [Node.js 22](https://nodejs.org/en/download/)
- [pnpm 10](https://pnpm.io/installation)

# <img src="https://raw.githubusercontent.com/daltonmenezes/electron-app/refs/heads/main/docs/images/bullet.svg" width="19" /> Installation
```bash
npx degit daltonmenezes/electron-app/template project_name
```
```bash
cd project_name
pnpm install
pnpm dev
```

Now, look at the **package.json** file in the root directory, you should update some of that settings with your project branding.

# <img src="https://raw.githubusercontent.com/daltonmenezes/electron-app/refs/heads/main/docs/images/bullet.svg" width="14" /> Adding new dependencies
For security reasons, **pnpm** has the [onlyBuiltDependenciesFile](https://pnpm.io/package_json#pnpmonlybuiltdependenciesfile) property where only 
dependencies listed in the [trusted-dependencies-scripts.json](./template/trusted-dependencies-scripts.json) file can perform the postscripts execution. So, if you want to add a new dependency that needs to run a postscript, you should add it to the [trusted-dependencies-scripts.json](./template/trusted-dependencies-scripts.json) file list.

# <img src="https://raw.githubusercontent.com/daltonmenezes/electron-app/refs/heads/main/docs/images/bullet.svg" width="14" /> Distribution

> [!NOTE]
> this section refers to local distribution, to release your app from GitHub Actions, see [Releasing](./docs/RELEASING.md) section.

### For all platforms

> **Note**: Check [Electron Builder docs](https://www.electron.build/cli) for more knowledge

```
pnpm build
```

### For a specific one

```bash
pnpm build --mac
# OR
pnpm build --win
# OR
pnpm build --linux
```

The builded apps will be available in the `dist` folder.

# <img src="https://raw.githubusercontent.com/daltonmenezes/electron-app/refs/heads/main/docs/images/bullet.svg" width="19" /> Documents
<table>
  <tr>
    <td valign="center">
      <p align="center">
        <a href="https://electron-router-dom.daltonmenezes.com/docs">Routing</a>
      </p>
    </td>
    <td valign="center">
      <p align="center">
        <a href="./docs/STRUCTURE.md">Structure Overview</a>
      </p>
    </td>
    <td valign="center">
      <p align="center">
        <a href="./docs/SOURCE_CODE_PROTECTION.md">Source Code Protection</a>
      </p>
    </td>
    </tr>
    <tr>
    <td valign="center">
      <p align="center">
        <a href="./docs/RELEASING.md">Releasing</a>
      </p>
    </td>
    <td valign="center">
      <p align="center">
        <a href="./docs/UNSIGNED_APPS.md">Running released unsigend apps</a>
      </p>
    </td>
    <td valign="center">
      <p align="center">
        <a href="./docs/FAQ.md">FAQ - Frequently Asked Questions</a>
      </p>
    </td>
  </tr>

<tr>
    <td valign="center" >
      <p align="center">
        <a href="./docs/THEMING.md">Theming</a>
      </p>
    </td>
  </tr>
</table>

# Contributing
> **Note**: 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:

- :beetle: Reporting a bug
- :page_facing_up: Improving this documentation
- :rotating_light: Sharing this project and recommending it to your friends
- :dollar: Supporting this project on GitHub Sponsors or Patreon
- :star2: Giving a star on this repository

# License

[MIT © Dalton Menezes](https://github.com/daltonmenezes/electron-app/blob/main/LICENSE)