Wondering what’s next for npm?Check out our public roadmap! »

    crossbuilder

    0.7.0 • Public • Published

    CrossBuilder

    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.

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

    Installation

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

    Development

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

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

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

    LICENSE

    MIT

    Install

    npm i crossbuilder

    DownloadsWeekly Downloads

    3

    Version

    0.7.0

    License

    MIT

    Last publish

    Collaborators

    • avatar