📝 README Updated
This commit is contained in:
soulehshaikh99
parent
6cd12bfcf2
commit
1ebac42cf0
308
README.md
308
README.md
@ -1,3 +1,311 @@
|
|||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
The boilerplate code to get started creating Cross-platform Desktop Apps with Electron and Gatsby.js as front-end technology.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
[](http://forthebadge.com) [](http://forthebadge.com)<br />
|
||||||
|
|
||||||
|
[](http://forthebadge.com) [](http://forthebadge.com) [](http://forthebadge.com)
|
||||||
|
|
||||||
|
[](https://github.com/feross/standard)
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## ✒️ Overview
|
||||||
|
|
||||||
|
The aim of this project is to provide Web Developers using `gatsby.js` the power to create cross-platform desktop apps using `electron`.
|
||||||
|
|
||||||
|
#### 🧐 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-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.
|
||||||
|
|
||||||
|
**`gatsby.js`** is used as a front-end technology for this Project.
|
||||||
|
|
||||||
|
**`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.
|
||||||
|
|
||||||
|
**`wait-on`** is used as it can wait for sockets, and http(s) resources to become available.
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## 🚀 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.
|
||||||
|
But I strongly recommend using <em>yarn</em> as it is a better choice when compared to <em>npm</em>.
|
||||||
|
|
||||||
|
### 🤓 Use this boilerplate
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Clone the Project
|
||||||
|
# GitHub CLI Users
|
||||||
|
$ gh repo clone https://github.com/soulehshaikh99/create-gatsby-electron-app.git
|
||||||
|
# or Normal Git Users
|
||||||
|
$ git clone https://github.com/soulehshaikh99/create-gatsby-electron-app.git
|
||||||
|
|
||||||
|
# Switch location to the cloned directory
|
||||||
|
$ cd create-gatsby-electron-app
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
$ yarn # or npm install
|
||||||
|
|
||||||
|
# Run your app
|
||||||
|
$ yarn electron-dev # or npm run electron-dev
|
||||||
|
|
||||||
|
# Package Your App
|
||||||
|
$ yarn electron-pack # or npm run electron-pack
|
||||||
|
```
|
||||||
|
|
||||||
|
### 💫 Create this boilerplate from scratch (Manual Setup)
|
||||||
|
|
||||||
|
#### 1) Start by installing `gatsby-cli` globally
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ yarn global add gatsby-cli
|
||||||
|
# npm i -g gatsby-cli
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2) Create new project
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ gatsby new create-gatsby-electron-app
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3) Change Directory
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ cd create-gatsby-electron-app
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 4) Move all dependencies to devDependencies using IDE / Text Editor
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# It should look something like this
|
||||||
|
"dependencies": {},
|
||||||
|
"devDependencies": {
|
||||||
|
"gatsby-image": "^2.4.16",
|
||||||
|
"gatsby-plugin-manifest": "^2.4.23",
|
||||||
|
"gatsby-plugin-offline": "^3.2.23",
|
||||||
|
"gatsby-plugin-react-helmet": "^3.3.10",
|
||||||
|
"gatsby-plugin-sharp": "^2.6.27",
|
||||||
|
"gatsby-source-filesystem": "^2.3.24",
|
||||||
|
"gatsby-transformer-sharp": "^2.5.13",
|
||||||
|
"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",
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 5) Install Development Dependencies
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ yarn add --dev electron electron-builder wait-on concurrently
|
||||||
|
# npm i -D electron electron-builder wait-on concurrently
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 6) Install Production Dependency
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ yarn add electron-serve # or npm i electron-serve
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 7) Your dependencies should look something like this
|
||||||
|
|
||||||
|
```json
|
||||||
|
"dependencies": {
|
||||||
|
"electron-serve": "^1.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"concurrently": "^5.3.0",
|
||||||
|
"electron-builder": "^22.8.0",
|
||||||
|
"electron": "^9.2.1",
|
||||||
|
"gatsby-image": "^2.4.16",
|
||||||
|
"gatsby-plugin-manifest": "^2.4.23",
|
||||||
|
"gatsby-plugin-offline": "^3.2.23",
|
||||||
|
"gatsby-plugin-react-helmet": "^3.3.10",
|
||||||
|
"gatsby-plugin-sharp": "^2.6.27",
|
||||||
|
"gatsby-source-filesystem": "^2.3.24",
|
||||||
|
"gatsby-transformer-sharp": "^2.5.13",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 8) Create main.js file (serves as entry point for Electron App's Main Process)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Windows Users
|
||||||
|
$ fsutil file createnew main.js 0
|
||||||
|
# notepad main.js
|
||||||
|
|
||||||
|
# Linux and macOS Users
|
||||||
|
$ touch main.js
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 9) Paste the below code in main.js file
|
||||||
|
```js
|
||||||
|
// Modules to control application life and create native browser window
|
||||||
|
const { app, BrowserWindow, dialog } = require('electron');
|
||||||
|
const path = require('path');
|
||||||
|
const serve = require('electron-serve');
|
||||||
|
const loadURL = serve({ directory: 'public' });
|
||||||
|
|
||||||
|
// 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 mainWindow;
|
||||||
|
|
||||||
|
function isDev() {
|
||||||
|
return !app.isPackaged;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createWindow() {
|
||||||
|
// Create the browser window.
|
||||||
|
mainWindow = new BrowserWindow({
|
||||||
|
width: 800,
|
||||||
|
height: 600,
|
||||||
|
webPreferences: {
|
||||||
|
nodeIntegration: true
|
||||||
|
},
|
||||||
|
// Use this in development mode.
|
||||||
|
icon: isDev() ? path.join(process.cwd(), 'src/images/gatsby-icon.png') : path.join(__dirname, 'public/icons/icon-512x512.png'),
|
||||||
|
// Use this in production mode.
|
||||||
|
// icon: path.join(__dirname, 'public/icons/icon-512x512.png'),
|
||||||
|
show: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// This block of code is intended for development purpose only.
|
||||||
|
// Delete this entire block of code when you are ready to package the application.
|
||||||
|
if (isDev()) {
|
||||||
|
mainWindow.loadURL('http://localhost:8000/');
|
||||||
|
} else {
|
||||||
|
loadURL(mainWindow);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Uncomment the following line of code when app is ready to be packaged.
|
||||||
|
// loadURL(mainWindow);
|
||||||
|
|
||||||
|
// Open the DevTools and also disable Electron Security Warning.
|
||||||
|
// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true;
|
||||||
|
// mainWindow.webContents.openDevTools();
|
||||||
|
|
||||||
|
// Emitted when the window is closed.
|
||||||
|
mainWindow.on('closed', function () {
|
||||||
|
// Dereference the window object, usually you would store windows
|
||||||
|
// in an array if your app supports multi windows, this is the time
|
||||||
|
// when you should delete the corresponding element.
|
||||||
|
mainWindow = null
|
||||||
|
});
|
||||||
|
|
||||||
|
// Emitted when the window is ready to be shown
|
||||||
|
// This helps in showing the window gracefully.
|
||||||
|
mainWindow.once('ready-to-show', () => {
|
||||||
|
mainWindow.show()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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.on('ready', createWindow);
|
||||||
|
|
||||||
|
// Quit when all windows are closed.
|
||||||
|
app.on('window-all-closed', function () {
|
||||||
|
// On macOS it is common for applications and their menu bar
|
||||||
|
// to stay active until the user quits explicitly with Cmd + Q
|
||||||
|
if (process.platform !== 'darwin') app.quit()
|
||||||
|
});
|
||||||
|
|
||||||
|
app.on('activate', function () {
|
||||||
|
// 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 (mainWindow === null) createWindow()
|
||||||
|
});
|
||||||
|
// 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.
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 10) Update the script section of `package.json`
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Add this scripts
|
||||||
|
"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",
|
||||||
|
"electron-pack": "electron-builder"
|
||||||
|
|
||||||
|
# You should end up with something similar
|
||||||
|
"scripts": {
|
||||||
|
"build": "gatsby build",
|
||||||
|
"develop": "gatsby develop",
|
||||||
|
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
|
||||||
|
"serve": "gatsby serve",
|
||||||
|
"clean": "gatsby clean",
|
||||||
|
"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",
|
||||||
|
"electron-pack": "electron-builder"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
#### 11) 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.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
"name": "create-gatsby-electron-app", # By default it is gatsby-starter-default
|
||||||
|
"main": "main.js", # Application Entry Point
|
||||||
|
"build": {
|
||||||
|
"icon": "src/images/gatsby-icon.png",
|
||||||
|
"productName": "Gatsby and Electron App",
|
||||||
|
"files": [
|
||||||
|
"public/**/*",
|
||||||
|
"main.js"
|
||||||
|
],
|
||||||
|
"win": {}, # Windows Specific Configuration
|
||||||
|
"linux": {}, # Linux Specific Configuration
|
||||||
|
"mac": {} # MacOs Specific Configuration
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 12) Test drive your app
|
||||||
|
```bash
|
||||||
|
# Run your app
|
||||||
|
$ yarn electron-dev # or npm run electron-dev
|
||||||
|
|
||||||
|
# Package Your App
|
||||||
|
$ yarn electron-pack # or npm run electron-pack
|
||||||
|
```
|
||||||
|
|
||||||
|
### 💯 Result
|
||||||
|
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>😍 Made with ❤️ from Souleh</h3>
|
||||||
|
|
||||||
|
[](http://forthebadge.com)
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<h3>📋 License: </h3>
|
||||||
|
Licensed under the <a href="https://github.com/soulehshaikh99/create-gatsby-electron-app/blob/master/LICENSE">MIT License</a>.
|
||||||
|
|
||||||
npx degit sveltejs/template create-svelte-electron-app
|
npx degit sveltejs/template create-svelte-electron-app
|
||||||
cd create-svelte-electron-app
|
cd create-svelte-electron-app
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user