Electron is a framework for building desktop apps with CSS, Javascript and HTML.
Here is a five minute guide line to start with electron.
Here is a five minute guide line to start with electron.
Video introduction
1. Installing Node.js
Install node.js. Download and install it.
2. Install electron
Open command terminal (cmd.exe for windows)
change the directory to your app folder.
enter the command
npm install electron --save-dev3. File structure
Electron app is structured like this.
Hello_world/
├── package.json
├── index.js
└── index.htmlCreate a folder named "Hello_world" or any as your wish.
4. package.json
Inside the folder create a file named "package.json"
{
"name" : "Hello_world",
"version" : "0.1.0",
"main" : "index.js"
}5. index.js
Inside the folder create a file named "index.js"
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({ width: 800, height: 600, frame: true, })
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Emitted when the window is closed.
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
6. index.html
Inside the folder create a file named "index.js"
place the electron logo in the folder.
7. Run Electron hello world app
You have a window like this:
Now make your own app. You can get all the code I used here.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<style>
body {
font-family: 'Roboto';font-size: 48px; font-weight: 300;
background-color: #2B2E3B; margin: 0; padding: 0;
color: #C1F4FE;
}
#svg{
margin: 200px 0 0 0;
}
</style>
<body align="center">
<div id="svg"> <img src="electron.svg" alt="electron"> </div>
<p>Hello World!</p>
</body>
</html>
place the electron logo in the folder.
7. Run Electron hello world app
Now let’s get back to the electron . command. run
electron .You have a window like this:
Post a Comment