0. If you haven't installed Electron yet, you can do so through following link.
Electron (Windows Environments)
1. Installing Node.js (About installing the node.js) 2. Make workspace 2.1. Make project folder mkdir "new-electron-app" 2.2. Create the porject npm init 2.3. you have to check if 'package.json' jas been created and then need to enter some information - au
windows-u.tistory.com
1. You make entry file in the root directory. (below code is sample)
<main.html>
<!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>
<main.js>
const { app, BrowserWindow } = require('electron')
// include the Node.js 'path' module at the top of your file
const path = require('path')
// modify your existing createWindow() function
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
<preload.js>
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])
}
})
2. Run the project
npm start
3. Packaging and Deployment (by using Electron Forge)
3.1. You can add the Electron Forge package thorugh following command
npm install --save-dev @electron-forge/clinpx electron-forge import
3.2. Build
npm run make
3.3. You can execute through execute file
\out\new-electron-app-win32-x64\new-electron-app.exe
4. Finally, compare it with your root directory
'Basic Development > Electron' 카테고리의 다른 글
| 4. The easy way to create a project (0) | 2023.12.31 |
|---|---|
| 3. Adding webpack-package and practice (0) | 2023.12.31 |
| 2. Adding react package and practice (0) | 2023.12.31 |
| 0. What is the Electron? (0) | 2023.12.31 |
