일렉트론 Quick Start는
https://www.electronjs.org/docs/latest/tutorial/quick-start
에 예시가 나와있다.
1.Nodejs 설치 및 업데이트
node -v
npm -v
npm init
{
"name": "my-electron-app",
"version": "1.0.0",
"description": “First electron app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
npm install --save-dev electron
yarn add electron --dev
"scripts":{
...
"start": "electron ." // 실행 스크립트
...
}
6. index.html 생성
- root폴더에 index.html을 만들고 다음과 같이 작성
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
// preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
npm start
or yarn start
npm install --save-dev @electron-forge/cli
npx electron-forge import