Electron + Vite + React + TypeScript Template

A template for using electron quickly.
Please understand that the code and explanation are mainly written in Korean. 🥲

⚠️ 이 템플릿은 더 이상 유지보수를 진행하지 않습니다.

아래 링크에 있는 nestjs로 새롭게 생성한 템플릿을 이용해주세요!

차이점

nestjs + ipc decorator로 통신

템플릿 UI 및 의존성 패키지 제거

업데이트 로딩 화면 추가

yarn에서 pnpm으로 변경

자동 업데이트 및 배포 Github Action 사전 구성

electron & vite를 사용해 빠른 개발, 빌드가 가능한 TypeScript 환경
앱에 필수적인 요소 자동 업데이트, 저장소, 로그 등 사전구성
파일 시스템 라우팅 기능 (Next.js에서 사용하던 방식)
electron 기능 개발시 modules로 분리 개발 가능하도록 구성 (관심사 분리 및 앱의 여러 상태들을 공유하기 위해 modules로 처리) (autoload 처리)
deeplink 처리 (modules/deepLink/resolvers 예시) (autoload 처리)
빠른 개발을 위한 파일 생성기 (yarn g 명령어로 사용가능)
Windows, MacOS 크로스플랫폼을 고려한 개발

App framework: electron
App build tool: electron-builder
App storage: electron-store
App auto updater: electron-updater
Bundle tool: vite
Frontend framework: react + typescript
Code style: eslint + prettier + @trivago/prettier-plugin-sort-imports
File system based router: react-router-dom v6 + custom (src/components/FileSystemRoutes)
CSS: styled-components
State management library: recoil
Date: dayjs

사용하기 전 레이아웃이나 특정 패키지들이 필요없다면 제거하고 시작하셔도 됩니다.

yarn dev

yarn build

yarn build:all