Electron
If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.
Category
- Electron:QuickStart
- Electron:Python - Python과 Electron을 통합하기 위한 뻘짓 기행기
- Electron Fiddle - 일렉트론을 빠르고 쉽게
Libraries
- electron-builder
- electron-vue (vue) - 처음부터 vue를 electron에 통합한다.
- Vue CLI Plugin Electron Builder - 이미 구축된 vue 프로젝트를 Background Process 로 기동한 후 electron을 web-view 로만 사용한다.
- Nextron (Next.js + Electron)
Projects
- Github - surfbird: A Microblogging client built on Electron and Vue
- fbs - Electron의 가벼운 대체제
Update server
Depending on your needs, you can choose from one of these:
- Hazel - Vercel에서 무료로 배포할 수 있는 비공개 또는 오픈 소스 앱용 업데이트 서버입니다. GitHub 릴리스에서 가져오고 GitHub의 CDN 기능을 활용합니다.
- Nuts - GitHub 릴리스도 사용하지만 앱 업데이트를 디스크에 캐시하고 개인 리포지토리를 지원합니다.
- electron-release-server - 릴리스를 처리하기 위한 대시보드를 제공하며 릴리스가 GitHub에서 시작되지 않아도 됩니다.
- Nucleus - Atlassian에서 관리하는 Electron 앱을 위한 완전한 업데이트 서버입니다. 여러 애플리케이션 및 채널을 지원합니다. 정적 파일 저장소를 사용하여 서버 비용을 최소화합니다.
Quick start
const electron = require('electron')
// 애플리케이션 생명주기를 조작 하는 모듈.
const {app} = electron
// 네이티브 브라우저 창을 만드는 모듈.
const {BrowserWindow} = electron
// 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면
// 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다.
let win
function createWindow () {
// 새로운 브라우저 창을 생성합니다.
win = new BrowserWindow({width: 800, height: 600})
// 그리고 현재 디렉터리의 index.html을 로드합니다.
win.loadURL(`file://${__dirname}/out/index.html`)
// 개발자 도구를 엽니다.
win.webContents.openDevTools()
// 창이 닫히면 호출됩니다.
win.on('closed', () => {
// 윈도우 객체의 참조를 삭제합니다. 보통 멀티 윈도우 지원을 위해
// 윈도우 객체를 배열에 저장하는 경우가 있는데 이 경우
// 해당하는 모든 윈도우 객체의 참조를 삭제해 주어야 합니다.
win = null
})
}
// 이 메서드는 Electron의 초기화가 끝나면 실행되며 브라우저
// 윈도우를 생성할 수 있습니다. 몇몇 API는 이 이벤트 이후에만
// 사용할 수 있습니다.
app.on('ready', createWindow)
// 모든 창이 닫히면 애플리케이션 종료.
app.on('window-all-closed', () => {
// macOS의 대부분의 애플리케이션은 유저가 Cmd + Q 커맨드로 확실하게
// 종료하기 전까지 메뉴바에 남아 계속 실행됩니다.
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// macOS에선 보통 독 아이콘이 클릭되고 나서도
// 열린 윈도우가 없으면, 새로운 윈도우를 다시 만듭니다.
if (win === null) {
createWindow()
}
})
// 이 파일엔 제작할 애플리케이션에 특화된 메인 프로세스 코드를
// 포함할 수 있습니다. 또한 파일을 분리하여 require하는 방법으로
// 코드를 작성할 수도 있습니다.
See also
Favorite site
- Electron web site
- Electron으로 웹 앱 만들듯 데스크톱 앱 만들기
- Electron 애플리케이션 만들기
- Electron + AngularJS - Creating sample application
- Creating Desktop Applications With AngularJS and GitHub Electron
- Electron에서 JavaScript 라이브러리 로딩 방법
- Create a Desktop App with Angular 2 and Electron
Guide
- Electron 시작하기
- Electron and C++ dll
- Using custom node packages in Electron
- [추천] Electron 3 일렉트론뷰로 우아한 데스크탑 앱 만들기 ToDo