Init commit

This commit is contained in:
Observer KRypt0n_ 2021-09-14 11:06:09 +02:00
parent 0f80b60994
commit 1fd74880e3
No known key found for this signature in database
GPG key ID: DC5D4EC1303465DA
7 changed files with 149 additions and 0 deletions

3
.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
node_modules
dist
package-lock.json

51
README.md Normal file
View file

@ -0,0 +1,51 @@
# Electron Blank Application
This is the blank application for your electron project
## Requirements
To use Electron you must have installed node js. For windows it is available on its [official website](https://nodejs.org/en/), for linux you can download the `node` packet from your packet manager
## Installation
```sh
git clone https://github.com/krypt0nn/electron-blank-app ./my-app
cd my-app
npm i
```
`git clone` will download a blank bundle for your project and save it in the `./my-app` directory *(`my-app` folder in the current opened in the console directory)*
`cd my-app` will move you to this downloaded bundle
`npm i` will install requirements
## Set up
In the `package.json` you should change these parameters:
* name - your project name
* version
* description
* keywords - your project keywords
* author
## Development
All your development processes will be inside the `src` directory. The default page is `src/html/index.html`
To run your application - use `npm start` command
To build it for any systems - `npm run build:all`
* For Windows only: `npm run build:win`
* For Linux only: `npm run build:linux`
* For MacOS only: `npm run build:darwin`
All the binaries will appear in the `dist` directory in a folder with name `[app name]-[platform]-[arch]`, for example `electron-blank-app-linux-x64`
To pack linux binary to the flatpak binary you can run `npm run pack:flatpak`. This operation requires pre-installed `flatpak` and `flatpak-build` packages
<br>
Author: [Nikita Podvirnyy](https://vk.com/technomindlp)

44
entry.js Normal file
View file

@ -0,0 +1,44 @@
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow ()
{
const mainWindow = new BrowserWindow ({
width: 800,
height: 600,
webPreferences: {
// Is not safety
// Use it to have access to the node modules inside html files
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadFile(path.join(__dirname, 'src', 'html', 'index.html'));
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0)
createWindow();
});
});
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin')
app.quit();
});

22
package.json Normal file
View file

@ -0,0 +1,22 @@
{
"name": "electron-blank-app",
"version": "1.0.0",
"description": "Electron Blank Application",
"keywords": [],
"author": "author",
"license": "GPL-3.0",
"main": "entry.js",
"scripts": {
"start": "electron .",
"build:all": "electron-packager . --out=dist --asar --overwrite --all --ignore=dist",
"build:darwin": "electron-packager . --out=dist --asar --overwrite --platform=darwin --arch=x64 --ignore=dist",
"build:linux": "electron-packager . --out=dist --asar --overwrite --platform=linux --arch=x64 --ignore=dist",
"build:win": "electron-packager . --out=dist --asar --overwrite --platform=win32 --arch=x64 --ignore=dist",
"pack:flatpak": "electron-installer-flatpak --src=dist/*-linux-x64 --dest=dist/installers --arch=x64"
},
"devDependencies": {
"electron": "^14.0.0",
"electron-installer-flatpak": "^0.8.0",
"electron-packager": "^15.4.0"
}
}

4
src/css/index.css Normal file
View file

@ -0,0 +1,4 @@
.greeting
{
text-align: center;
}

20
src/html/index.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS styles -->
<link rel="stylesheet" href="../css/index.css">
<!-- JS scripts -->
<script src="../js/index.js"></script>
<title>Hello World</title>
</head>
<body>
<h1 class="greeting"></h1>
</body>
</html>

5
src/js/index.js Normal file
View file

@ -0,0 +1,5 @@
// When page is fully loaded
window.addEventListener('DOMContentLoaded', () => {
// Change the text inside tags with greeting class
document.querySelector('.greeting').innerText = 'Hello World';
}, false);