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 사전 구성

https://github.com/2skydev/electron-nestjs-react-vite-template

특징들 둘러보기

• 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

시작하기

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

dev mode

yarn dev

vite & electron build (현재 OS기준)

yarn build

vite & electron build (모든 OS기준)

yarn build:all

스크린샷들