📝 README Updated

This commit is contained in:
soulehshaikh99 2021-08-14 01:52:24 +05:30
parent f0a13732b2
commit 45c94ccab1

View File

@ -82,23 +82,25 @@ $ cd create-svelte-electron-app
```bash ```bash
# It should look something like this # It should look something like this
"dependencies": {}, "dependencies": {}
"devDependencies": { "devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0", "@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^8.0.0", "@rollup/plugin-node-resolve": "^11.0.0",
"rollup": "^2.3.4", "rollup": "^2.3.4",
"rollup-plugin-livereload": "^1.0.0", "rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-svelte": "^5.0.3", "rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-terser": "^6.0.0", "rollup-plugin-svelte": "^7.0.0",
"sirv-cli": "^1.0.0", "rollup-plugin-terser": "^7.0.0",
"sirv-cli": "^1.0.0"
"svelte": "^3.0.0" "svelte": "^3.0.0"
} }
``` ```
#### 4) Install Dependencies #### 4) Install & Update all Dependencies at the same time
```bash ```bash
$ yarn # or npm install $ yarn add --dev @rollup/plugin-commonjs@latest @rollup/plugin-node-resolve@latest rollup@latest rollup-plugin-css-only@latest rollup-plugin-livereload@latest rollup-plugin-svelte@latest rollup-plugin-terser@latest sirv-cli@latest svelte@latest
# npm i -D @rollup/plugin-commonjs@latest @rollup/plugin-node-resolve@latest rollup@latest rollup-plugin-css-only@latest rollup-plugin-livereload@latest rollup-plugin-svelte@latest rollup-plugin-terser@latest sirv-cli@latest svelte@latest
``` ```
#### 5) Install Development Dependencies #### 5) Install Development Dependencies
@ -118,21 +120,22 @@ $ yarn add electron-serve # or npm i electron-serve
```json ```json
"dependencies": { "dependencies": {
"electron-serve": "^1.0.0" "electron-serve": "^1.1.0"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0", "@rollup/plugin-commonjs": "^20.0.0",
"@rollup/plugin-node-resolve": "^8.0.0", "@rollup/plugin-node-resolve": "^13.0.4",
"concurrently": "^5.3.0", "concurrently": "^6.2.1",
"electron": "^9.2.1", "electron": "^13.1.9",
"electron-builder": "^22.8.0", "electron-builder": "^22.11.7",
"rollup": "^2.3.4", "rollup": "^2.56.2",
"rollup-plugin-livereload": "^1.0.0", "rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-svelte": "^5.0.3", "rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-terser": "^6.0.0", "rollup-plugin-svelte": "^7.1.0",
"sirv-cli": "^1.0.0", "rollup-plugin-terser": "^7.0.2",
"svelte": "^3.0.0", "sirv-cli": "^1.0.12",
"wait-on": "^5.2.0" "svelte": "^3.42.1",
"wait-on": "^6.0.0"
} }
``` ```
@ -155,10 +158,10 @@ $ touch main.js
```js ```js
// Modules to control application life and create native browser window // Modules to control application life and create native browser window
const { app, BrowserWindow, dialog } = require('electron'); const { app, BrowserWindow, dialog } = require("electron");
const path = require('path'); const path = require("path");
const serve = require('electron-serve'); const serve = require("electron-serve");
const loadURL = serve({ directory: 'public' }); const loadURL = serve({ directory: "public" });
// Keep a global reference of the window object, if you don't, the window will // 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. // be closed automatically when the JavaScript object is garbage collected.
@ -172,10 +175,10 @@ function createWindow() {
// declare variables which hold file location to preload.js file and application's icon. // declare variables which hold file location to preload.js file and application's icon.
let appIcon; let appIcon;
if(isDev()) { if (isDev()) {
appIcon = path.join(__dirname, 'public/favicon.png'); appIcon = path.join(__dirname, "public/favicon.png");
} else { } else {
appIcon = path.join(__dirname, 'public/favicon.png'); appIcon = path.join(__dirname, "public/favicon.png");
} }
// Create the browser window. // Create the browser window.
@ -188,13 +191,13 @@ function createWindow() {
// contextIsolation: false // contextIsolation: false
}, },
icon: appIcon, icon: appIcon,
show: false show: false,
}); });
// This block of code is intended for development purpose only. // This block of code is intended for development purpose only.
// Delete this entire block of code when you are ready to package the application. // Delete this entire block of code when you are ready to package the application.
if (isDev()) { if (isDev()) {
mainWindow.loadURL('http://localhost:5000/'); mainWindow.loadURL("http://localhost:5000/");
} else { } else {
loadURL(mainWindow); loadURL(mainWindow);
} }
@ -207,36 +210,36 @@ function createWindow() {
// mainWindow.webContents.openDevTools(); // mainWindow.webContents.openDevTools();
// Emitted when the window is closed. // Emitted when the window is closed.
mainWindow.on('closed', function () { mainWindow.on("closed", function () {
// Dereference the window object, usually you would store windows // Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time // in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element. // when you should delete the corresponding element.
mainWindow = null mainWindow = null;
}); });
// Emitted when the window is ready to be shown // Emitted when the window is ready to be shown
// This helps in showing the window gracefully. // This helps in showing the window gracefully.
mainWindow.once('ready-to-show', () => { mainWindow.once("ready-to-show", () => {
mainWindow.show() mainWindow.show();
}); });
} }
// This method will be called when Electron has finished // This method will be called when Electron has finished
// initialization and is ready to create browser windows. // initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs. // Some APIs can only be used after this event occurs.
app.on('ready', createWindow); app.on("ready", createWindow);
// Quit when all windows are closed. // Quit when all windows are closed.
app.on('window-all-closed', function () { app.on("window-all-closed", function () {
// On macOS it is common for applications and their menu bar // On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q // to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') app.quit() if (process.platform !== "darwin") app.quit();
}); });
app.on('activate', function () { app.on("activate", function () {
// On macOS it's common to re-create a window in the app when the // 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. // dock icon is clicked and there are no other windows open.
if (mainWindow === null) createWindow() if (mainWindow === null) createWindow();
}); });
// In this file you can include the rest of your app's specific main process // In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here. // code. You can also put them in separate files and require them here.
@ -309,7 +312,7 @@ $ touch preload.js
#### 2) Paste placeholder code in preload.js file #### 2) Paste placeholder code in preload.js file
```js ```js
console.log('Hello from preload.js file!'); console.log("Hello from preload.js file!");
``` ```
#### 3) Update main.js file #### 3) Update main.js file
@ -318,12 +321,12 @@ console.log('Hello from preload.js file!');
// declare variables which hold file location to preload.js file and application's icon. // declare variables which hold file location to preload.js file and application's icon.
let preloadJS, appIcon; let preloadJS, appIcon;
if(isDev()) { if (isDev()) {
preloadJS = path.join(__dirname, 'preload.js'); preloadJS = path.join(__dirname, "preload.js");
appIcon = path.join(__dirname, 'public/favicon.png'); appIcon = path.join(__dirname, "public/favicon.png");
} else { } else {
preloadJS = path.join(process.cwd(), 'resources/preload.js') preloadJS = path.join(process.cwd(), "resources/preload.js");
appIcon = path.join(__dirname, 'public/favicon.png'); appIcon = path.join(__dirname, "public/favicon.png");
} }
// Create the browser window. // Create the browser window.
@ -337,7 +340,7 @@ mainWindow = new BrowserWindow({
// contextIsolation: false // contextIsolation: false
}, },
icon: appIcon, icon: appIcon,
show: false show: false,
}); });
``` ```