@bridg/bridg-react-components

Bridg-react-components

All shared react components for UI.

About

This project is based on react-component-boilerplate. For more info, check out this this blog.

Common Tasks

• Developing - npm start - Runs the development server at localhost:8080 and use Hot Module Replacement. You can override the default host and port through env (HOST, PORT).
• Creating a version - npm version <x.y.z> - Updates /dist and package.json with the new version and create a version tag to Git.
• Publishing a version - npm publish - Pushes a new version to npm and updates the project site.

Testing

The test setup is based on Karma/Mocha/Chai/Phantom. Code coverage report is generated through istanbul/isparta to build/.

• Running tests once - npm test
• Running tests continuously - npm run test:tdd
• Running individual tests - npm test -- - Works with test:tdd too.
• Linting - npm run test:lint - Runs ESLint.

Documentation Site

The project includes a GitHub Pages specific portion for setting up a documentation site for the component library. The main commands handle with the details for you. Sometimes you might want to generate and deploy it by hand, or just investigate the generated bundle.

• Building - npm run gh-pages - Builds the documentation into ./gh-pages directory.
• Deploying - npm run deploy-gh-pages - Deploys the contents of ./gh-pages to the gh-pages branch. GitHub will pick this up automatically. Your site will be available through *.github.io/`.
• Generating stats - npm run stats - Generates stats that can be passed to webpack analyse tool. This is useful for investigating what the build consists of.

Useful npm hooks

{
  ...
  "scripts": {
    ...
    "preversion": "npm run test && npm run lint && npm run dist && npm run dist-min && git commit --allow-empty -am \"Update dist\"",
    "prepublish": "npm run dist:modules",
    "postpublish": "npm run gh-pages && npm run deploy-gh-pages",
    "postinstall": "node lib/post_install.js"
  }
}

preversion - hook makes sure all tests pass, lint included, generates distribution builds, and includes those into a commit. I prefer to maintain the builds this way as it's convenient and I don't feel they bloat the repository too much. So far the approach has worked well.

prepublish - hook makes sure the npm version of the package gets generated. In short, it just triggers Babel over the source and converts possible special features and JSX I'm using into a form that's easy to consume from the Node.js world.

postpublish - generates the package site and pushes it to the gh-pages branch. The setup is isomorphic and it will convert the project README.md into a HTML structure. This was implemented to make sure the package page works even without JavaScript. There's also a minor SEO benefit. And you get to say that your boilerplate is isomorphic so there's that.

postinstall - portion is there to make sure that it is possible to consume the package through a GitHub reference (i.e., bebraw/reactabular#hashgoeshere). If I detect that there isn't expected directory, it will trigger npm run dist:modules just like the prepublish process does. The only problem is that the current solution supports only Node.js 0.12+. It would be possible to rewrite that if it becomes an issue.