EZPPFarm/EZPPLauncher
2
0
Fork 0
Code Issues Pull Requests Projects 1 Releases 14 Activity

📝 README Updated

Browse Source
This commit is contained in:
soulehshaikh99 2020-08-21 01:46:29 +05:30
parent 1ebac42cf0
commit c9237b77f1
1 changed files with 65 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
README.md
View File

@ -1,8 +1,8 @@
<div align="center"> <div align="center">
<img alt="Electron Gatsby" src="https://raw.githubusercontent.com/soulehshaikh99/assets/master/create-electron-framework-app/readme/svg/Electron_Gatsby.svg" width="550" /> <img alt="Electron Svelte Crossover Banner" src="https://raw.githubusercontent.com/soulehshaikh99/assets/master/create-electron-framework-app/readme/svg/Electron_Svelte.svg" width="580" />
</div> </div>
<br /> <br />
The boilerplate code to get started creating Cross-platform Desktop Apps with Electron and Gatsby.js as front-end technology. The boilerplate code to get started creating Cross-platform Desktop Apps with Electron and Svelte as front-end technology.
<br /> <br />
<br /> <br />
<div align="center"> <div align="center">
@ -17,18 +17,17 @@ The boilerplate code to get started creating Cross-platform Desktop Apps with El
## ✒️ Overview ## ✒️ Overview
The aim of this project is to provide Web Developers using `gatsby.js` the power to create cross-platform desktop apps using `electron`. The aim of this project is to provide Web Developers using `svelte` the power to create cross-platform desktop apps using `electron`.
#### 🧐 What packages does the project use? #### 🧐 What packages does the project use?
**`electron`** enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers. **`electron`** enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.
**`electron-builder`** is used as a complete solution to package and build a ready for distribution (supports Numerous target formats) Electron app with "auto update" support out of the box. **`electron-builder`** is used as a complete solution to package and build a ready for distribution (supports Numerous target formats) Electron app with "auto update" support out of the box.
**`electron-serve`** is used for Static file serving for Electron apps. **`electron-serve`** is used for Static file serving for Electron apps.
**`gatsby.js`** is used as a front-end technology for this Project. **`svelte`** is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
**`gatsby-cli`** is used to perform common functionality, such as creating a Gatsby application based on a starter, spinning up a hot-reloading local development server, and more!
**`concurrently`** is used to run multiple commands concurrently. **`concurrently`** is used to run multiple commands concurrently.
@ -37,7 +36,7 @@ The aim of this project is to provide Web Developers using `gatsby.js` the power
## 🚀 Getting Started ## 🚀 Getting Started
**Note:** If you wish to use npm over yarn then modify package.json by replacing `yarn` with `npm` in `prebuild`, `electron-dev` and `preelectron-pack` scripts. **Note:** If you wish to use npm over yarn then modify `package.json` by replacing `yarn` with `npm` in `electron-dev` and `preelectron-pack` scripts.
But I strongly recommend using <em>yarn</em> as it is a better choice when compared to <em>npm</em>. But I strongly recommend using <em>yarn</em> as it is a better choice when compared to <em>npm</em>.
### 🤓 Use this boilerplate ### 🤓 Use this boilerplate
@ -45,12 +44,12 @@ But I strongly recommend using <em>yarn</em> as it is a better choice when compa
```bash ```bash
# Clone the Project # Clone the Project
# GitHub CLI Users # GitHub CLI Users
$ gh repo clone https://github.com/soulehshaikh99/create-gatsby-electron-app.git $ gh repo clone https://github.com/soulehshaikh99/create-svelte-electron-app.git
# or Normal Git Users # or Normal Git Users
$ git clone https://github.com/soulehshaikh99/create-gatsby-electron-app.git $ git clone https://github.com/soulehshaikh99/create-svelte-electron-app.git
# Switch location to the cloned directory # Switch location to the cloned directory
$ cd create-gatsby-electron-app $ cd create-svelte-electron-app
# Install dependencies # Install dependencies
$ yarn # or npm install $ yarn # or npm install
@ -64,47 +63,41 @@ $ yarn electron-pack # or npm run electron-pack
### 💫 Create this boilerplate from scratch (Manual Setup) ### 💫 Create this boilerplate from scratch (Manual Setup)
#### 1) Start by installing `gatsby-cli` globally #### 1) Use degit scaffolding tool to get started with svelte template.
```bash ```bash
$ yarn global add gatsby-cli $ npx degit sveltejs/template create-svelte-electron-app
# npm i -g gatsby-cli ```
```
#### 2) Create new project #### 2) Switch to project directory
```bash ```bash
$ gatsby new create-gatsby-electron-app $ cd create-svelte-electron-app
``` ```
#### 3) Change Directory #### 3) Move all dependencies to devDependencies using IDE / Text Editor
```bash
$ cd create-gatsby-electron-app
```
#### 4) Move all dependencies to devDependencies using IDE / Text Editor
```bash ```bash
# It should look something like this # It should look something like this
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"gatsby-image": "^2.4.16", "@rollup/plugin-commonjs": "^14.0.0",
"gatsby-plugin-manifest": "^2.4.23", "@rollup/plugin-node-resolve": "^8.0.0",
"gatsby-plugin-offline": "^3.2.23", "rollup": "^2.3.4",
"gatsby-plugin-react-helmet": "^3.3.10", "rollup-plugin-livereload": "^1.0.0",
"gatsby-plugin-sharp": "^2.6.27", "rollup-plugin-svelte": "^5.0.3",
"gatsby-source-filesystem": "^2.3.24", "rollup-plugin-terser": "^6.0.0",
"gatsby-transformer-sharp": "^2.5.13", "sirv-cli": "^1.0.0",
"gatsby": "^2.24.47", "svelte": "^3.0.0"
"prettier": "2.0.5",
"prop-types": "^15.7.2",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react": "^16.13.1",
} }
``` ```
#### 4) Install Dependencies
```bash
$ yarn # or npm install
```
#### 5) Install Development Dependencies #### 5) Install Development Dependencies
```bash ```bash
@ -125,27 +118,26 @@ $ yarn add electron-serve # or npm i electron-serve
"electron-serve": "^1.0.0" "electron-serve": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"concurrently": "^5.3.0", "concurrently": "^5.3.0",
"electron-builder": "^22.8.0",
"electron": "^9.2.1", "electron": "^9.2.1",
"gatsby-image": "^2.4.16", "electron-builder": "^22.8.0",
"gatsby-plugin-manifest": "^2.4.23", "rollup": "^2.3.4",
"gatsby-plugin-offline": "^3.2.23", "rollup-plugin-livereload": "^1.0.0",
"gatsby-plugin-react-helmet": "^3.3.10", "rollup-plugin-svelte": "^5.0.3",
"gatsby-plugin-sharp": "^2.6.27", "rollup-plugin-terser": "^6.0.0",
"gatsby-source-filesystem": "^2.3.24", "sirv-cli": "^1.0.0",
"gatsby-transformer-sharp": "^2.5.13", "svelte": "^3.0.0",
"gatsby": "^2.24.47",
"prettier": "2.0.5",
"prop-types": "^15.7.2",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react": "^16.13.1",
"wait-on": "^5.2.0" "wait-on": "^5.2.0"
} }
``` ```
#### 8) Create main.js file (serves as entry point for Electron App's Main Process) #### 8) Download the app icon
[favicon.png](https://raw.githubusercontent.com/soulehshaikh99/assets/master/framework-icons/svelte/favicon.png) and place it in the public directory, overwriting the original (the original one is too small for packaging app, electron-builder will raise an error).
#### 9) Create main.js file (serves as entry point for Electron App's Main Process)
```bash ```bash
# Windows Users # Windows Users
@ -156,7 +148,8 @@ $ fsutil file createnew main.js 0
$ touch main.js $ touch main.js
``` ```
#### 9) Paste the below code in main.js file #### 10) Paste the below code in main.js file
```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');
@ -181,7 +174,7 @@ function createWindow() {
nodeIntegration: true nodeIntegration: true
}, },
// Use this in development mode. // Use this in development mode.
icon: isDev() ? path.join(process.cwd(), 'src/images/gatsby-icon.png') : path.join(__dirname, 'public/icons/icon-512x512.png'), icon: isDev() ? path.join(process.cwd(), 'public/favicon.png') : path.join(__dirname, 'public/favicon.png'),
// Use this in production mode. // Use this in production mode.
// icon: path.join(__dirname, 'public/icons/icon-512x512.png'), // icon: path.join(__dirname, 'public/icons/icon-512x512.png'),
show: false show: false
@ -190,7 +183,7 @@ function createWindow() {
// 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:8000/'); mainWindow.loadURL('http://localhost:5000/');
} else { } else {
loadURL(mainWindow); loadURL(mainWindow);
} }
@ -238,41 +231,37 @@ app.on('activate', function () {
// 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.
``` ```
#### 10) Update the script section of `package.json` #### 11) Update the script section of `package.json`
```bash ```bash
# Add this scripts # Add this scripts
"prebuild": "yarn run clean", "electron": "wait-on http://localhost:5000 && electron .",
"electron": "wait-on http://localhost:8000 && electron .", "electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"",
"electron-dev": "concurrently \"yarn run develop\" \"yarn run electron\"",
"preelectron-pack": "yarn run build", "preelectron-pack": "yarn run build",
"electron-pack": "electron-builder" "electron-pack": "electron-builder"
# You should end up with something similar # You should end up with something similar
"scripts": { "scripts": {
"build": "gatsby build", "build": "rollup -c",
"develop": "gatsby develop", "dev": "rollup -c -w",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", "start": "sirv public",
"serve": "gatsby serve", "electron": "wait-on http://localhost:5000 && electron .",
"clean": "gatsby clean", "electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
"prebuild": "yarn run clean",
"electron": "wait-on http://localhost:8000 && electron .",
"electron-dev": "concurrently \"yarn run develop\" \"yarn run electron\"",
"preelectron-pack": "yarn run build", "preelectron-pack": "yarn run build",
"electron-pack": "electron-builder" "electron-pack": "electron-builder"
} }
``` ```
#### 11) Add the following configuration in `package.json`
#### 12) Add the following configuration in `package.json`
**Note:** build configuration is used by electron-builder, modify it if you wish to add more packaging and native distribution options for different OS Platforms. **Note:** build configuration is used by electron-builder, modify it if you wish to add more packaging and native distribution options for different OS Platforms.
```bash ```bash
"name": "create-gatsby-electron-app", # By default it is gatsby-starter-default "name": "create-svelte-electron-app", # By default it is svelte-app
"main": "main.js", # Application Entry Point "main": "main.js", # Application Entry Point, please verify entry point is set to main.js
"build": { "build": {
"icon": "src/images/gatsby-icon.png", "icon": "public/favicon.png",
"productName": "Gatsby and Electron App", "productName": "Svelte and Electron App",
"files": [ "files": [
"public/**/*", "public/**/*",
"main.js" "main.js"
@ -283,7 +272,8 @@ app.on('activate', function () {
} }
``` ```
#### 12) Test drive your app #### 14) Test drive your app
```bash ```bash
# Run your app # Run your app
$ yarn electron-dev # or npm run electron-dev $ yarn electron-dev # or npm run electron-dev
@ -295,7 +285,7 @@ $ yarn electron-pack # or npm run electron-pack
### 💯 Result ### 💯 Result
<div align="center"> <div align="center">
<img alt="Electron Gatsby Window Screeenshot" src="https://raw.githubusercontent.com/soulehshaikh99/assets/master/create-electron-framework-app/readme/png/create-gatsby-electron-app.png" /> <img alt="Electron Svelte Window Screeenshot" src="https://raw.githubusercontent.com/soulehshaikh99/assets/master/create-electron-framework-app/readme/png/create-svelte-electron-app.png" />
</div> </div>
<h3>😍 Made with ❤️ from Souleh</h3> <h3>😍 Made with ❤️ from Souleh</h3>
@ -304,33 +294,4 @@ $ yarn electron-pack # or npm run electron-pack
<br/> <br/>
<h3>📋 License: </h3> <h3>📋 License: </h3>
Licensed under the <a href="https://github.com/soulehshaikh99/create-gatsby-electron-app/blob/master/LICENSE">MIT License</a>. Licensed under the <a href="https://github.com/soulehshaikh99/create-svelte-electron-app/blob/master/LICENSE">MIT License</a>.
npx degit sveltejs/template create-svelte-electron-app
cd create-svelte-electron-app
Move all dependencies to devDependencies
"devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"rollup": "^2.3.4",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^6.0.0",
"svelte": "^3.0.0"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
yarn add --dev electron electron-builder wait-on concurrently
yarn add electron-serve
http://localhost:5000
fsutil file createnew main.js 0
Verify name
Favicon is too small