Sparc
Bootstrap Electron with static views or socket connection to remote source such as Create React App.
NOTE This is a work in progress but works as expected. API will change, check back for new features and bug fixes.
Quick Start
$ npm install sparc
Configure
;; // OR for ES5// const Sparc = require('../dist').Sparc;// const { join } = require('path'); ; // Defines the view defers loading // until ready is called.app.defineView'main'; // Handle app quit by platform and// activate gracefully then call ready.app .handleQuit .handleActivate .ready;
NOTE "main" is required by Sparc. You can change the name of your main view in options.mainView
Sparc Options
ConfirmExitConfig - when true will display "Are you sure you want to quit?" If a string is provided that value will be displayed. Otherwise if an Electron showMessageBox options object is provided it will be used.
Create React App Example
In order to use Electron with Create React App there are several steps that need to be taken. Although not difficult, there are several.
example here
Working Create React AppIf familiar you can jump right in to the example and work from there however for posterity sake the steps are below.
Install Dependencies
We need a few dependencies. Concurrently will be used so we can run both Create React App and Knectron in parallel. Knectron will be used to connect to the CRA dev server. Customize-cra and react-app-rewired will allow us to modify the Webpack config without ejecting our app.
npm install concurrently knectron customize-cra react-app-rewired -s
Configure Scripts
Now that we have react-app-rewired installed we need to change the start/build scripts that ship with Create React App.
For our start script we add an environment variable Browser=none
to let CRA know not to launch the browser as it will not be needed.
Change this:
"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
To this: (where "./app" is path to your Electron app)
"start": "BROWSER=none concurrently \"react-app-rewired start\" \"knectron ./app\" --kill-others","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-app-rewired eject",
Windows Users
The above start script will not work as the environment variable cannot be set in that manner instead use the following:
NOTE the missing space between none and concurrently shown below is correct.
"start": "set BROWSER=none&&concurrently \"react-app-rewired start\" \"knectron ./app\" --kill-others",
Configure Overrides
Create a file in the root of your CRA project called config-overrides.js
. Place the following in this file:
This ensures that Webpack has the correct target, in this case the electron-renderer.
const override = ; const isBrowser = processenvBROWSER !== 'none'; const plugin = { if !isBrowser configtarget = 'electron-renderer'; return config;} moduleexports = ;
Configure Sparc Main
We need to tell our main window/view to use the Create React App url that React is listening on. Knectron does this by providing an environment variable or you can just manually set it. We also need to ensure that nodeIntegration is set to true.
NOTE "main" is required by Sparc. You can change the name of your main view in options.mainView
app;
More on Knectron
Knectron can be use to spin up any Electron app. Sparc is NOT requied.
Find out more here.