├── public ├── icon.icns ├── favicon.ico ├── manifest.json └── index.html ├── scripts ├── start.js └── dev.js ├── .gitignore ├── .babelrc ├── .DS_Store ├── src ├── api.js ├── index.js └── app.js ├── .eslintrc ├── .idea ├── markdown-navigator │ └── profiles_settings.xml ├── vcs.xml ├── misc.xml └── markdown-navigator.xml ├── config-overrides.js ├── server └── server.js ├── package.json ├── README.md ├── main.js └── LICENSE.md /public/icon.icns: -------------------------------------------------------------------------------- 1 | icns -------------------------------------------------------------------------------- /scripts/start.js: -------------------------------------------------------------------------------- 1 | require('../main'); 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | build 4 | build-server 5 | .idea 6 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tombuyse/electron-react-node-boilerplate/HEAD/.DS_Store -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tombuyse/electron-react-node-boilerplate/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const apiUrl = 'http://localhost:9001'; 4 | 5 | export const api = axios.create({baseURL: apiUrl}); 6 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app", 3 | "parserOptions": { 4 | "ecmaFeatures": { 5 | "legacyDecorators": true 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.idea/markdown-navigator/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /config-overrides.js: -------------------------------------------------------------------------------- 1 | /* config-overrides.js */ 2 | 3 | const {addDecoratorsLegacy, useEslintRc, override} = require('customize-cra'); 4 | 5 | module.exports = override( 6 | addDecoratorsLegacy(), 7 | useEslintRc('./.eslintrc') 8 | ); 9 | -------------------------------------------------------------------------------- /scripts/dev.js: -------------------------------------------------------------------------------- 1 | if (!require('piping')()) { return; } 2 | 3 | const electron = require('electron'); 4 | const proc = require('child_process'); 5 | const child = proc.spawn(electron, process.argv.slice(2), {stdio: 'inherit'}); 6 | child.on('close', function (code) { process.exit(code) }); 7 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // This file is required by the index.html file and will 2 | // be executed in the renderer process for that window. 3 | // All of the Node.js APIs are available in this process. 4 | import React from 'react'; 5 | import ReactDOM from 'react-dom'; 6 | import App from './app.js'; 7 | 8 | window.onload = () => { 9 | ReactDOM.render(, document.getElementById('app')); 10 | }; 11 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | import appModulePath from 'app-module-path'; 2 | import http from 'http'; 3 | import express from 'express'; 4 | import cors from 'cors'; 5 | 6 | appModulePath.addPath(`${__dirname}`); 7 | 8 | const Api = express(); 9 | const HTTP = http.Server(Api); 10 | 11 | Api.use(cors()); 12 | 13 | Api.get('/test', (req, res) => res.status(200).send('success!')); 14 | 15 | HTTP.listen(9001, () => { 16 | console.log('listening on *:9001'); 17 | }); 18 | 19 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import {api} from './api'; 3 | 4 | const App = () => { 5 | const [successText, setSuccessText] = useState(null); 6 | 7 | useEffect(() => { 8 | api.get('/test') 9 | .then(({data}) => setSuccessText(data)) 10 | .catch(err => console.error(err)); 11 | }); 12 | 13 | return ( 14 |
15 |

Electron is running! sss

16 |

Fetched api response from server: {successText}

17 |
18 | ); 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electron-react-node-boilerplate", 3 | "version": "1.0.0", 4 | "description": "An Electron application with React and Node", 5 | "main": "./main.js", 6 | "homepage": "./", 7 | "scripts": { 8 | "start": "concurrently \"npm run react-start\" \"npm run server-start\" \"wait-on http://localhost:3000 && npm run electron-dev\"", 9 | "react-build": "react-app-rewired build", 10 | "react-start": "BROWSER=none react-app-rewired start", 11 | "server-build": "babel server --out-dir build-server", 12 | "server-start": "nodemon --watch server --exec babel-node server/server.js", 13 | "electron-dev": "node scripts/dev.js scripts/start.js", 14 | "electron-pack": "electron-builder -c.extraMetadata.main='./main.js'", 15 | "preelectron-pack": "npm run react-build && npm run server-build" 16 | }, 17 | "author": "tbuyse", 18 | "devDependencies": { 19 | "react-app-rewired": "^2.1.3", 20 | "customize-cra": "^0.2.12", 21 | "react-scripts": "3.0.1", 22 | "concurrently": "^4.1.0", 23 | "wait-on": "^3.2.0", 24 | "electron": "^5.0.2", 25 | "electron-builder": "^20.41.0", 26 | "@babel/cli": "^7.4.4", 27 | "@babel/core": "^7.4.4", 28 | "@babel/node": "^7.4.5", 29 | "@babel/preset-env": "^7.4.4" 30 | }, 31 | "dependencies": { 32 | "app-module-path": "^2.2.0", 33 | "axios": "^0.18.0", 34 | "cors": "^2.8.5", 35 | "electron-is-dev": "^1.1.0", 36 | "express": "^4.17.1", 37 | "nodemon": "^1.19.1", 38 | "piping": "^1.0.0-rc.4", 39 | "react": "^16.8.6", 40 | "react-dom": "^16.8.6" 41 | }, 42 | "build": { 43 | "appId": "com.electron-react-node", 44 | "files": [ 45 | "build/**/**/*", 46 | "build-server/**/**/*", 47 | "node_modules/**/*", 48 | "./main.js" 49 | ], 50 | "directories": { 51 | "buildResources": "assets" 52 | } 53 | }, 54 | "browserslist": [] 55 | } 56 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # electron-react-node-boilerblate 2 | 3 | Walkthrough described at https://medium.com/jstack-eu/using-electron-with-react-and-node-b498fbf23272 4 | 5 | **Description** 6 | 7 | Boilerplate project to quickly get started with Electron, React and Node 8 | containing following features: 9 | 10 | - Electron v5 11 | - React using react-app-rewired 12 | - Node using babel to transpile 13 | - Live reload 14 | - Packaging of Electron app fully functional 15 | 16 | **How to use** 17 | 18 | The package.json contains following commands: 19 | 20 | ```bash 21 | # starts electron with React and Node in development mode 22 | npm start 23 | 24 | # builds the react application, the output will be in /build 25 | npm run react-build 26 | 27 | # starts the react application on localhost:3000 28 | npm run react-start 29 | 30 | # builds the node application, the output will be in /build-server 31 | npm run server-build 32 | 33 | # runs the node application in development mode 34 | npm run server-start 35 | 36 | # starts the electron process and enables live reload 37 | npm run electron-dev 38 | 39 | # Starts the packaging process for Electron, output will be in /dist 40 | npm run electron-pack 41 | 42 | # Will be automatically started by electron-pack, builds the react and node applications 43 | npm run preelectron-pack 44 | ``` 45 | 46 | **Folder structure** 47 | 48 | An overview of the folder structure can be found below: 49 | 50 | ``` 51 | | 52 | |-- /build (output of the built react application) 53 | | 54 | |-- /build-server (output of the built node application) 55 | | 56 | |-- /dist (output of the completely built Electron app) 57 | | 58 | |-- /public (contains the index.html, which will be picked up by react-app-rewired) 59 | | 60 | |-- /scripts (scripts to enable live reload) 61 | | 62 | |-- /server (node source files) 63 | | 64 | |-- /src (react source files) 65 | ``` 66 | 67 | ## License 68 | 69 | [CC0 1.0 (Public Domain)](LICENSE.md) 70 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | 26 | 27 | 30 | 31 | 32 | 33 | 34 | 35 | Electron react node boilerplate 36 | 37 | 38 | 39 |
40 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // Modules to control application life and create native browser window 2 | const {app, BrowserWindow} = require('electron'); 3 | const isDev = require('electron-is-dev'); 4 | const path = require('path'); 5 | const url = require('url'); 6 | 7 | // Keep a global reference of the window object, if you don't, the window will 8 | // be closed automatically when the JavaScript object is garbage collected. 9 | let mainWindow; 10 | 11 | function createWindow() { 12 | // express server is started here when production build 13 | if (!isDev) { 14 | require(path.join(__dirname, 'build-server/server')); 15 | } 16 | 17 | // Create the browser window. 18 | mainWindow = new BrowserWindow({ 19 | width: 800, 20 | height: 600, 21 | webPreferences: { 22 | nodeIntegration: true 23 | } 24 | }); 25 | 26 | // and load the index.html of the app. 27 | mainWindow.loadURL(isDev ? 'http://localhost:3000' : url.format({ 28 | pathname: path.join(__dirname, 'build/index.html'), 29 | protocol: 'file:', 30 | slashes: true 31 | })); 32 | 33 | // Open the DevTools. 34 | // mainWindow.webContents.openDevTools() 35 | 36 | // Emitted when the window is closed. 37 | mainWindow.on('closed', function () { 38 | // Dereference the window object, usually you would store windows 39 | // in an array if your app supports multi windows, this is the time 40 | // when you should delete the corresponding element. 41 | mainWindow = null 42 | }) 43 | } 44 | 45 | // This method will be called when Electron has finished 46 | // initialization and is ready to create browser windows. 47 | // Some APIs can only be used after this event occurs. 48 | app.on('ready', createWindow); 49 | 50 | // Quit when all windows are closed. 51 | app.on('window-all-closed', function () { 52 | // On macOS it is common for applications and their menu bar 53 | // to stay active until the user quits explicitly with Cmd + Q 54 | if (process.platform !== 'darwin') app.quit() 55 | }); 56 | 57 | app.on('activate', function () { 58 | // On macOS it's common to re-create a window in the app when the 59 | // dock icon is clicked and there are no other windows open. 60 | if (mainWindow === null) createWindow() 61 | }); 62 | 63 | // In this file you can include the rest of your app's specific main process 64 | // code. You can also put them in separate files and require them here. 65 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | ================== 3 | 4 | Statement of Purpose 5 | --------------------- 6 | 7 | The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an "owner") of an original work of authorship and/or a database (each, a "Work"). 8 | 9 | Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works ("Commons") that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others. 10 | 11 | For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the "Affirmer"), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights. 12 | 13 | 1. Copyright and Related Rights. 14 | -------------------------------- 15 | A Work made available under CC0 may be protected by copyright and related or neighboring rights ("Copyright and Related Rights"). Copyright and Related Rights include, but are not limited to, the following: 16 | 17 | i. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work; 18 | ii. moral rights retained by the original author(s) and/or performer(s); 19 | iii. publicity and privacy rights pertaining to a person's image or likeness depicted in a Work; 20 | iv. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(a), below; 21 | v. rights protecting the extraction, dissemination, use and reuse of data in a Work; 22 | vi. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and 23 | vii. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof. 24 | 25 | 2. Waiver. 26 | ----------- 27 | To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer's Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer's heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer's express Statement of Purpose. 28 | 29 | 3. Public License Fallback. 30 | ---------------------------- 31 | Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer's express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer's Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "License"). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer's express Statement of Purpose. 32 | 33 | 4. Limitations and Disclaimers. 34 | -------------------------------- 35 | 36 | a. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document. 37 | b. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law. 38 | c. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person's Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work. 39 | d. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work. 40 | -------------------------------------------------------------------------------- /.idea/markdown-navigator.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 36 | 37 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | --------------------------------------------------------------------------------