Building web, Electron and Cordova apps for mobile that use Redux actions for messaging and are built on top of the SAFE SDK.
Redux states are synced between background, injected page, app window, extension popup and badge.
The developing is the same as for the web apps with React and Redux, just use the src/app
boilerplate.
src/app
: React cross-browser application (will be imported in the apps bellow).src/web
: web app sources.src/browser
: extensions sources.src/electron
: Electron app sourcestest/app
: tests for Redux actions and reducers, and for React components (using enzyme).test/chrome
: tests for Chrome app and extension (using chromedriver, selenium-webdriver).
# required node.js/io.js
# clone it
npm install
# build files to './dev'
# watch files change
# start WebpackDevServer
npm start
- Open the SAFE-browser at
localhost:3000
.
This boilerplate uses Webpack
and react-transform
. You can hot reload by editing related files of ./src/app
. If the inject page for the extension is on https (like https://github.com
), click the 'shield' icon on the Chrome address bar to allow loading http://localhost
there (after making any changes in dev mode), so hot reload can work for that page.
We use Redux DevTools Extension, install it from Chrome store for debugging.
# build files to './build/web'
npm run build:web
# build files to './build/electron'
npm run build:electron
# or to start it
npm run start:electron
- Install global tools:
npm install -g cordova
. - Add your cordova platform by running
cordova platform add %PLATFORM%
(where%PLATFORM%
is the platform you deploy for: android and more). - Use
cordova run android
orcordova build android
to run or build the app (it will executenpm run build:cordova
automatically as a hook).
# build and compress Electron app to [name].dmg, win32-ia32.zip, win32-x64.zip, linux-ia32.zip, linux-x64.zip
npm run compress:electron
# test app
npm run test:app
# start Chromedriver for testing with Chrome
npm run before:test:chrome
# test everything
npm test
- Web app
- Electron app
- Integrate Rust Example
- Integrate external Rust crate