Coder Social home page Coder Social logo

crossbuilder-with-router's Introduction


Build Status Build status Windows bitHound Score Dependency Status devDependency Status

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.


  • 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 sources
  • src/electron: Electron app sources
  • test/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


# required node.js/io.js
# clone it
npm install


# build files to './dev'
# watch files change
# start WebpackDevServer
npm start

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, 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

  1. Install global tools: npm install -g cordova.
  2. Add your cordova platform by running cordova platform add %PLATFORM% (where %PLATFORM% is the platform you deploy for: android and more).
  3. Use cordova run android or cordova build android to run or build the app (it will execute npm run build:cordova automatically as a hook).

Build & Compress

# build and compress Electron app to [name].dmg,,,,
npm run compress:electron

# compress Chrome app to
npm run compress:app

# compress Chrome extension to
npm run compress:extension

# compress Firefox extension to firefox.xpi
npm run compress:firefox



# 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




crossbuilder-with-router's People


iamakulov avatar jhen0409 avatar rt2zz avatar zalmoxisus avatar



Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.