app-starter-component v0.1.0

app-starter-component

A starter project to kick start a React UI component development.

Browsers Support

Features

• Able to easily kick start a React UI component development with hot reload enabled.
• Integrate with BabelJS to transpile ES6/JSX.
• Integrate with Webpack to generate both CommonJS and UMD libraries.
• Integrate with ESLint(with eslint-plugin-react) for JS/JSX linting.
• Integrate with Radium to inline style your component.
• Integrate with Karma/Mocha/Enzyme for unit/functional testing.
• Integrate with Coveralls for test coverage analytics.
• Integrate with SauceLabs for cross browser testing on the cloud.
• Integrate with BrowserSync for time-saving synchronised browser testing.
• Integrate with react-docgen to generate README.md(can be published with Github Pages) for React UI component.

Note 1: Please refer to https://goo.gl/aoJnhG to understand what CommonJS/AMD/UMD is. Note 2: Please refer to https://goo.gl/uxduiq for eslint-plugin-react rules. Note 3: Please refer to https://goo.gl/4oDyNC for why you should use inline styling for React UI component.

Get Started

$ mkdir -p COMPONENT_NAME
$ curl -L https://goo.gl/QcyxZN | tar -xz -C COMPONENT_NAME --strip-components=1

Note 1: Replace COMPONENT_NAME with the project name that you want. Note 2: COMPONENT_NAME should be using kebab-case convention, e.g. app-button.

Installations

• Install Node >= 5.6.0

$ brew install node

• Install NPM >= 3.8.0

$ npm update -g npm

• Install NPM dependencies

$ cd PROJECT_ROOT
$ npm install

• Update Component Name - First Time Only

$ cd PROJECT_ROOT
$ npm run init:name -- --owner=<GITHUB_USERNAME|GITHUB_ORG>

Setup Travis - CI Integration

1. Get a Travis account at https://travis-ci.org/. (Best to login with Github)
2. Sync up your Github repo on Travis by clicking the Sync account button in the page below:

• If your project is under a personal Github account, please go to https://travis-ci.org/profile/USERNAME.
• If your project is under an organization Github account, please go to https://travis-ci.org/profile/ORGANIZATION.

3. Once the sync up is done, you'll see your project repo and click on the toggle to enable it to integrate with Travis.
4. Install Travis gem by running gem install travis.
5. Login to Travis by running travis login.
6. Now, you should be able to encrypt access keys/tokens to put into .travis.yml by running travis encrypt ENV_VARIABLE=value --add.

If you want to customise .travis.yml, please make sure that you go through the documentation.

Setup SauceLabs - Cloud-Based Testing

1. Get a SauceLabs account at https://www.saucelabs.com.
2. Login and go to https://saucelabs.com/beta/users/USERNAME.
3. Click on the Add user to create a sub account for your project. It is strongly recommended due to the SauceLabs badge/matrix status is bound to 1 account.
4. Click on the sub account and copy the access key value.
5. Run travis encrypt SAUCE_ACCESS_KEY=PASTE_IT_HERE --add to encrypt and add the access key into .travis.yml.
6. Now, you're all set to run testings with SauceLabs on Travis.

Setup Coveralls - Test Coverage Analytics

1. Get a Coveralls account at https://coveralls.io/. (Best to login with Github)
2. Click on the Add Repo button and select your Github repo.
3. Toggle the checkbox of the repo that you want to add.
4. Click on the Details button and copy the repo token value.
5. Run travis encrypt COVERALLS_REPO_TOKEN=PASTE_IT_HERE --add to encrypt and add the repo token into .travis.yml.
6. Now, you're all set to upload the test coverage report to Coveralls on Travis.

Setup BitHound - Identify Risks/Piorities In Dependencies/Code

1. Get a BitHound account at https://www.bithound.io/. (Best to login with Github)
2. Click on the Add Project button.
3. Select the project that you want to analyse.
4. Now, you're all set to have BitHound analyse the project.

Available Commands

• Start local development with hot reloading enabled

// By default, use localhost with port 8000
$ npm start

// Use IP address
$ npm start -- --with-ip=true

// Use custom port
// Do not use 3001/3002 (used by BrowserSync and Weinre Debugger)
$ npm start -- --port=4000

• Generate CommonJS and UMD builds

$ npm run build

• Run ESLint against the JS/JSX

$ npm run lint

• Run unit/functional tests locally and generate coverage report

$ npm test

• Run unit/functional tests on Travis with SauceLabs and generate coverage report

$ npm run test:cloud

• Generate demo app into dist folder

$ npm run demo:build

• Publish demo app to gh-pages branch

$ npm run demo:publish

• Generate README.md doc

$ npm run doc:generate
$ git add README.md
$ git commit -m 'Update README.md.'
$ git push origin master