Electron Boilerplate 만들기

Boilerplate란 컴퓨터 프로그래밍에서 상용구 코드 또는 단순한 상용구는 변형이 거의 또는 전혀없이 여러 위치에서 반복되는 코드 섹션을 의미하며, 이 글에서는 electron 프로젝트를 시작하기 위해 설정해야하는 기초 설정들을 미리 작성해놓은 형태의 코드 섹션을 의미합니다.

Electron은 Nodejs 기반의 크로스플랫폼 데스크톱 어플리케이션으로 HTML, CSS, Javascript를 이용하여 Windows, Mac, Linux 환경에서 구동할 수 있는 어플리케이션입니다. Electron과 관련하여 많은 프로젝트들이 존재하고, electron-quick-start와 같은 간단하게 구성된 프로젝트를 Github에서 공유하고 있습니다.

다만, electron-quick-start는 프로그램을 구동하는 부분만 있고, 설치파일로 빌드하는 부분은 포함되어있지 않습니다. 그래서 이 글에서는 electron-quick-start 프로젝트에 electron-builder를 추가하여 프로그램 구동 및 빌드할 수 있는 프로젝트를 만들어 볼 것입니다.

Nodejs, NPM, git은 설치되어있다는 것을 가정하고 진행됩니다.

electron-quick-start 프로젝트 내려받기

electron에서 제공하는 electron-quick-start 프로젝트를 이용할 것이므로 먼저 electron-quick-start 프로젝트를 내려받습니다.

# 레파지토리에 있는 프로젝트를 가져옵니다.
> git clone https://github.com/electron/electron-quick-start.git
# 프로젝트 폴더로 이동합니다.
> cd electron-quick-start
/electron-quick-start>

package.json에 선언된 모듈 내려받기

electron-quick-start 프로젝트는 package.json만 포함되어있으며 어플리케이션에서 사용될 node_module 들은 포함되어있지 않습니다. 그러나 package.json에는 기본적인 모듈 외에도 어떤 모듈을 사용할 것인지 기록되어있으며, npm 명령어를 통해 해당 모듈들을 읽어와서 다운로드 받을 수 있습니다.

# package.json 파일을 읽어와서 node_module 파일들을 내려받는다.
/electron-quick-start> npm install

electron 어플리케이션 실행하기

npm install 명령어를 통해 모듈을 모두 다운로드 받으면 프로젝트에 node_modules라는 폴더가 생성됩니다. 이 폴더에는 node의 기본적인 모듈 외에도 package.json에서 선언한 모듈들이 모두 설치되어 있습니다.

설치가 완료된 뒤 프롬프트 혹은 터미널을 통해 다음 명령어를 실행하면 electron 어플리케이션을 실행할 수 있습니다.

# electron 어플리케이션 실행
/electron-quick-start> npm start

electron-builder 모듈 추가하기

electron-builder는 electron 프로젝트를 빌드하여 설치파일로 만들기 위한 모듈입니다. 이 모듈은 실제 서비스에서는 사용하지 않고, 개발에서만 사용될 것이므로 package.json 파일의 devDependencies에 추가합니다.

{
  "devDependencies": {
    "electron": "^12.0.0",
    "electron-builder": "^22.10.5"
  }
}

package.json 파일에 위와 같이 항목을 추가하고, npm install 명령어를 통해 electron-builder 모듈을 설치합니다.

# electron-builder 모듈 설치
/electron-quick-start> npm install

npm 명령어를 이용하여 electron-builder 설치하기

package.json 파일에 모듈을 선언하지 않고, npm 모듈을 이용하여 electron-builder 모듈을 설치할 수 있습니다.

# electron-builder를 개발용 모듈을로 선언하여 설치
/electron-quick-start> npm install electron-builder --save-dev

electron-builder 관련 package.json 속성 추가

electron-builder를 설치한 뒤 package.json 파일을 열어서 build에 필요한 항목들을 추가합니다.

Scipts 속성

electron-build를 실행할 속성을 선언합니다. 저의 개발환경은 Windows로 build에 대한 명령어도 Windows와 관련된 명령어만 추가하였습니다.

"scripts": {
  "build:win32": "electron-builder --win --ia32",	# Windows 32bit 환경 Build
  "build:win64": "electron-builder --win --x64",	# Windows 64bit 환경 Build
  # 32bit, 64bit 빌드를 모두 실행하는 명령어
  "build:win": "npm run build:win32 && npm run build:win64"
}

build

프로젝트를 빌드할 때 필요한 속성을 선언합니다.

"build": {
  "productName": "Electron Boilerplate",
  "appId": "com.github.ohmry.electron.boilerplate",
  "asar": true,
  "protocols": {
    "name": "ElectronBoilerplate",
    "schemes": [
      "ElectronBoilerplate"
    ]
  },
  "win": {
  	"target": [
      "zip",	# 압축파일로 생성
      "nsis"	# NSIS를 이용한 Installer도 생성
    ],
    "icon": "./resources/installer/Icon.ico"	# 설치아이콘 경로
  },
  "nsis": {
    "oneClick": false,	# 한번 클릭하는 걸로 설치되는 프로그램으로 할 것인지 여부
                        # true로 할 경우 경로 지정이 불가능
    "allowToChangeInstallationDirectory": true	# 설치경로 변경 가능 여부
  },
  "directories": {
    "buildResources": "./resources/installer/",
    "output": "./dist/",	# 설치파일이 생성될 위치
    "app": "."
  }
}

위 코드는 속성에 대한 설명을 쓰기 위해 주석(#)을 사용하였고, 실제 코드에서 붙여넣을 경우 주석을 모두 제거하고, 붙여넣어야 합니다.

프로젝트 빌드하기

package.json 파일에 위와 같이 속성을 모두 입력하고, 프롬프트 또는 터미널에서 아래 명령어를 실행하여 프로젝트를 빌드합니다.

/electron-quick-start> npm run build:win

작업이 모두 완료되면 프로젝트 폴더안에 dist라는 폴더가 생성되고, 해당 폴더 안에는 빌드된 프로젝트의 폴더와 해당 폴더를 압축한 zip 파일, Windows에서 프로그램을 설치하여 사용할 수 있는 installer 파일이 생성됩니다.

프로젝트 업로드하기

이제 electron-builder 까지 포함하여 electron 어플리케이션을 구동하고, 빌드하여 설치프로그램까지 만들 수 있는 boilerplate를 만들었습니다. 이 프로젝트를 나중에도 사용할 수 있도록 Github에 프로젝트를 업로드합니다.

# Git 정보 생성
/electron-quick-start> git init

node_modules에 존재하는 라이브러리들은 package.json 파일을 통해 다운로드받을 수 있으므로 굳이 저장소에 업로드하여 공유할 필요가 없습니다. 따라서 Github 저장소에 업로드할 때는 해당 폴더가 제외될 수 있도록 .gitnore 파일에 node_modules 폴더를 추가합니다.

/electron-quick-start> echo node_modules > .gitignore

Github에서 boilerplate를 저장할 저장소를 생성하고, 이 폴더를 저장소와 연결합니다.

/electron-quick-start> git remote add origin https://github.com/Ohmry/electron-boilerplate.git

GitHub에서 저장소를 신규로 생성하면 브랜치의 이름이 main으로 되어있습니다. 과거 master 브랜치였던 부분이 변경되어 Git 버전이 과거인 경우 remote로 저장소를 연결하면 master 브랜치로 연결됩니다.

프로젝트 파일을 모두 커밋하고, 서버에 푸시합니다.

# 프로젝트 파일의 모든 내용을 추가합니다.
/electron-quick-start> git add .
# 변경내용에 대한 커밋
/electron-quick-start> git commit -m "initialize"
# 변경된 내용을 서버에 푸시합니다.
/electron-quick-start> git push

마무리

이 글에서는 electron-quick-start 프로젝트에 배포를 위한 electron-builder 를 추가하여, 어플리케이션을 구동하고, 배포까지 가능한 Boilerplate를 만들고, GitHub 저장소에 저장까지 해보았습니다. electron-builder 외 다른 모듈을 추가하려면 electron-builder를 추가하는 방식과 동일하게 추가하여 사용하시면 됩니다.

제 레파지토리에 있는 electron-boilerplate는 이외에도 electron을 개발하는 동안 내용이 수정될 경우 자동으로 새로고침을 할 수 있도록 해주는 electron-reload와 스타일과 관련된 몇가지 모듈을 포함되어 있습니다.