Example UI Boilerplate

Batteries Included

• React for rendering
• Redux for application state
• SuperAgent for AJAX calls
• Mocha is our test harness
• Expect is our assertion library
• Enzyme to help with testing React components
• Webpack for bundling our app

Setup Locally

For initial setup, the repository needs to be forked and cloned, and dependencies need to be install using npm (package manager). To do so, visit the github repository page and fork the repo. Once forked, run the following commands:

git clone https://github.com/YOUR_USER_NAME/ui-boilerplate.git
cd ui-boilerplate
npm install

Development

We use npm as our task manager and webpack for our bundling and dev testing. To run the app in development, use the following command:

npm start

The application will be accessible at http://localhost:3000/. Changes will automatically load in once saved.

Testing

Tests are located alongside their source code with the suffix .test.js. Most components can be tested with shallow rendering, which isolates the component to just itself and its immediate children and is the recommended way to test.

Before submitting a pull request, make sure your change passes tests and linting. You can invoke the tests and linter with:

npm test

Tests and linting can both be run in "watch" mode, rerunning when a file changes:

npm run test:watch

npm run lint:watch

Deployment

For deployment, we bundle our application into four distinct parts:

• app.[hash].js - The application JavaScript we write
• vendor.[hash].js - The external JavaScript libraries we depend on
• styles.[hash].css - The css file for our application
• index.html - The basic HTML we need to house our JavaScript app

To generate a dist folder ready for deployment, run:

npm run build

This will generate the above files, plus source map files for the JavaScript and CSS files.