Awesome
CrossBuilder
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging.
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.
Structure
src/app
: React cross-browser application (will be imported in the apps bellow).src/web
: web app sources.src/browser
: extensions sources.src/chromeApp
: Chrome app sourcessrc/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).
CrossBuilder included libraries
Installation
# required node.js/io.js
# clone it
npm install
Development
# build files to './dev'
# watch files change
# start WebpackDevServer
npm start
- Open web app in browser at
localhost:3000
. - Load unpacked extension's
./dev
folder to Chrome.
React/Flux hot reload
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.
Debug with Redux DevTools
We use Redux DevTools Extension, install it from Chrome store for debugging.
Build web app
# build files to './build/web'
npm run build:web
Build Electron app
# build files to './build/electron'
npm run build:electron
# or to start it
npm run start:electron
Build Chrome app
# build files to './build/app'
npm run build:app
Build Chrome extension
# build files to './build/extension'
npm run build:extension
Build Firefox extension
# build files to './build/firefox'
npm run build:firefox
Note that you should use Firefox Nightly or Developer Edition to support WebExtensions. It's not possible for now to load Firefox extensions from local directories, so use npm run compress:firefox
instead to generate an xpi file or use Firefox Developer Edition which can load local directories. Make sure yo follow prerequisites and installing instruction.
Build & Run Cordova app
- 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 & Compress
# build and compress Electron app to [name].dmg, win32-ia32.zip, win32-x64.zip, linux-ia32.zip, linux-x64.zip
npm run compress:electron
# compress Chrome app to app.zip
npm run compress:app
# compress Chrome extension to extension.zip
npm run compress:extension
# compress Firefox extension to firefox.xpi
npm run compress:firefox
Load
Test
# test app
npm run test:app
# start Chromedriver for testing with Chrome
npm run before:test:chrome
# test Chrome extension
npm run test:chrome:extension
# test Chrome app
npm run test:chrome:app
# test Chrome extension and app
npm run test:chrome
# test everything
npm test
Roadmap
- Web app
- Electron app
- Chrome app
- Chrome extension
- Firefox extension (see the current status)
- Safari extension (based on Chrome to Safari port)