├── .babelrc ├── .gitignore ├── src ├── index.css ├── index.js ├── App.css ├── index.html ├── App.js └── logo.svg ├── assets └── favicon.ico ├── README.md ├── package.json └── main.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "react" 5 | ] 6 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | 4 | .cache/ 5 | dist/ 6 | build/ 7 | node_modules/ 8 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Snjoo/parcel-react-electron/HEAD/assets/favicon.ico -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Electron + React App bundled with Parcel 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
10 | logo 11 |

Welcome to React

12 |
13 |

14 | To get started, edit src/App.js and save to reload. 15 |

16 |
17 | ); 18 | } 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # parcel-react-electron 2 | 3 | A minimal Electron + React.js boilerplate with [parcel as bundler](https://github.com/parcel-bundler/parcel). Parcel is an alternative web application bundler to Webpack. 4 | 5 | ## Installation 6 | 7 | * `git@github.com:Snjoo/parcel-react-electron.git` 8 | * `cd parcel-react-electron` 9 | * `yarn` 10 | 11 | ## Usage 12 | 13 | ### Development mode 14 | Run these commands to start dev server and Electron app 15 | ``` bash 16 | # Parcel bundles the code and runs dev server 17 | $ yarn dev 18 | 19 | # Run the electron app which uses local dev server 20 | $ yarn start-dev 21 | ``` 22 | 23 | ### Production mode and packaging app 24 | Run this command to bundle code in production mode 25 | ``` bash 26 | # Parcel bundle code once 27 | $ yarn build 28 | 29 | # Create executables 30 | $ yarn dist 31 | ``` 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "parcel-reactjs-electron", 3 | "version": "1.1.0", 4 | "description": "A minimal React.js boilerplate with parcel as bundler", 5 | "main": "main.js", 6 | "scripts": { 7 | "dev": "parcel ./src/index.html -d build/", 8 | "start-dev": "ELECTRON_START_URL=http://localhost:1234 electron .", 9 | "start": "electron .", 10 | "build": "parcel build ./src/index.html -d build/ --public-url ./", 11 | "pack": "electron-builder --dir", 12 | "dist": "electron-builder", 13 | "postinstall": "electron-builder install-app-deps" 14 | }, 15 | "build": { 16 | "appId": "parcel.reactjs.electron", 17 | "mac": { 18 | "category": "your.app.category.type" 19 | }, 20 | "files": [ 21 | "main.js", 22 | "build/*" 23 | ] 24 | }, 25 | "keywords": [ 26 | "parcel", 27 | "react" 28 | ], 29 | "contributors": [ 30 | "Robin (https://www.robinwieruch.de)", 31 | "Samppa Hynninen " 32 | ], 33 | "license": "MIT", 34 | "dependencies": { 35 | "react": "^16.5.2", 36 | "react-dom": "^16.5.2" 37 | }, 38 | "devDependencies": { 39 | "babel-core": "^6.26.3", 40 | "babel-preset-env": "^1.7.0", 41 | "babel-preset-react": "^6.24.1", 42 | "electron": "^3.0.4", 43 | "electron-builder": "^20.28.4", 44 | "electron-reload": "^1.2.5", 45 | "parcel-bundler": "^1.10.3" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // Basic init 2 | const electron = require('electron') 3 | const {app, BrowserWindow} = electron 4 | const path = require('path'); 5 | const url = require('url'); 6 | 7 | // Let electron reloads by itself when webpack watches changes in ./app/ 8 | if (process.env.ELECTRON_START_URL) { 9 | require('electron-reload')(__dirname) 10 | } 11 | 12 | // To avoid being garbage collected 13 | let mainWindow 14 | 15 | app.on('ready', () => { 16 | 17 | let mainWindow = new BrowserWindow({width: 800, height: 600}) 18 | 19 | const startUrl = process.env.ELECTRON_START_URL || url.format({ 20 | pathname: path.join(__dirname, './build/index.html'), 21 | protocol: 'file:', 22 | slashes: true 23 | }); 24 | 25 | mainWindow.loadURL(startUrl) 26 | 27 | mainWindow.on('closed', function () { 28 | // Dereference the window object, usually you would store windows 29 | // in an array if your app supports multi windows, this is the time 30 | // when you should delete the corresponding element. 31 | mainWindow = null 32 | }) 33 | 34 | }) 35 | 36 | // Quit when all windows are closed. 37 | app.on('window-all-closed', function () { 38 | // On OS X it is common for applications and their menu bar 39 | // to stay active until the user quits explicitly with Cmd + Q 40 | if (process.platform !== 'darwin') { 41 | app.quit() 42 | } 43 | }); 44 | 45 | app.on('activate', function () { 46 | // On OS X it's common to re-create a window in the app when the 47 | // dock icon is clicked and there are no other windows open. 48 | if (mainWindow === null) { 49 | createWindow() 50 | } 51 | }); 52 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | --------------------------------------------------------------------------------