https://github.com/myferr/this-is-electron
An introduction into Electron.JS
https://github.com/myferr/this-is-electron
course electronjs helpful introduction javascript
Last synced: 3 months ago
JSON representation
An introduction into Electron.JS
- Host: GitHub
- URL: https://github.com/myferr/this-is-electron
- Owner: myferr
- Created: 2024-02-08T18:05:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-09T01:14:55.000Z (over 1 year ago)
- Last Synced: 2025-01-11T07:44:24.630Z (5 months ago)
- Topics: course, electronjs, helpful, introduction, javascript
- Language: JavaScript
- Homepage:
- Size: 80.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# This is Electron. (An introduction to Electron.js)
Electron is a **JavaScript framework** used for building desktop applications. Using the power of **JavaScript** and web development Electron makes desktop apps.
> index.js - JavaScript
```javascript
const { app, BrowserWindow } = require('electron/main')
const path = require('node:path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.removeMenu()
win.loadFile('./src/gui/index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
```
Using this JavaScript code my HTML file at `./src/gui/index.html` is ran as a desktop app! Turning HTML, CSS and JS into applications for desktop, Electron is super easy to download.
## Downloading Electron
> Node.JS and NPM are required in order to use Electron.JS
Electron is super easy to download using [NPM](https://www.npmjs.com/)!
◉ Installing NPM
○ [Go here to install NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
◉ Installing Electron.js
○ Enter in your command line `npm install electron`
## Setting up an Electron project
After downloading Electron run in your command line `npm init`. This will prompt you with a series of questions on setting up your `package.json`!
After that you should have two files. Your first file is your `index.js` file and your second file is `package.json`. Inside of your `package.json` you want this in your scripts:
```json
"scripts": {
"start": "electron ."
}
```
Then after that create a folder called `src` put your `index.js` inside of your `src` folder.
Inside of the `src` folder create a file called `preload.js`, inside of your `preload.js` enter the following code:
```javascript
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
```
After that create a folder inside your `src` folder and name it `gui`. Inside of your `gui` folder add your HTML, CSS and JavaScript files and save it all!
You should have your files looking like this now! Go into your terminal and run `npm start`
that will start your Electron application!
## Learn more about Electron
You've now learned how to setup a basic Electron application!
To learn even more go to the [official documentation for Electron](https://www.electronjs.org/docs/latest/)