React Topcoat Demo

This repository is a sandbox for the react-topcoat library.

The project builds to a simple app containing each of the Topcoat components. This repo is also being used to experiment with various ways of packaging a webapp with including:

• Standard webapp
• Chrome app
• Android app
• iOS app

It is built with the following technologies:

• App: ReactJS / Topcoat / SASS
• Tests: Mocha / Chai / SinonJS
• Build: GulpJS / Bower / Browserify / Cordova / MobileChromeApps
• Note: Will likely be taking a look at alternatives to Browserify such as Webpack

Build

The project builds to:

• build/js unminified js
• build/web standard webapp
• build/test mocha tests in the browser
• build/chrome chrome app
• cordova/www is symlinked to build/chrome

Build tasks:

• gulp clean deletes ./build
• gulp builds everything
• gulp build:web creates ./build/js, ./build/web, and ./build/test
• gulp build:chrome creates a chrome app in ./build/chrome
• gulp build:cordova creates platforms (if not exists) and performs cordova perpare

Dist tasks:

• gulp dist:web package webapp into ./dist/web
• gulp dist:chrome [--chrome=<path to chrome>] package chrome .crx file into ./dist/chrome
• gulp dist:android package .apk into ./dist/android TODO: sign the apk
• (TODO) gulp dist:ios package ios file into ./dist/ios

Run tasks:

• gulp run:test runs mocha tests in console
• gulp run:web runs the app at http://localhost:3000 and the mocha test server at http://localhost:3000/test.html
• gulp run:android [--emulator] runs the android
• gulp run:ios [--emulator] runs the ios app

Running as a Web App

Run: gulp run:web

Running as a Chrome App

Run gulp dist then go to chrome://extensions and either:

• drag dist/chrome/react-topcoat.crx to the window
• or load build/chrome as an unpacked extension

Running in the iOS Emulator

Run: gulp run:ios --emulator (omit --emulator if you have a device connected)

Running in the Android Emulator

Run: gulp run:android --emulator (omit --emulator if you have a device connected)