Kinto React Boilerplate

A sample Kinto & React project boilerplate.

Scope

The boilerplate helps you to develop Kinto JavaScript applications faster by making some decisions on your behalf. It includes:

• React + ES6 classes using Babel;
• Setup test environment using Mocha+Chai, Sinon, and jsdom for React components;
• Setup build and packaging using webpack;
• Basic asynchronous store for collection records ¹;
• Fully tested demo CRUD app with sync button.

We even provide some recipes to help you go further!

1: Replacing it with a Flux library is up to you :)

Getting started

Install

Start a new project and fetch the boilerplate:

$ mkdir newproject && cd $_
$ git init .
$ git remote add boilerplate https://github.com/Kinto/kinto-react-boilerplate.git
$ git fetch boilerplate
$ git merge boilerplate/master

Install the environment and run:

$ npm install
$ npm start

Demo application is available at http://localhost:3000

With auto-refresh when code changes!

Test

Run the tests suite with:

$ npm test

• Node v4+ is required.
• A travis.yml file is provided to enable tests on TravisCI in one click!

Publish

In order to publish the application on Github pages, you just need to run:

$ npm run publish

After a few minutes, the application will be available at http://username.github.io/project/

If you want to check the content of the build/ folder before publishing, or host it somewhere else yourself, just run instead:

$ npm run build

Get some more

For example, let us setup Less:

$ git merge boilerplate/setup-css-less

Once merged, the dev server will be auto-refreshed when the style.less is modified!

Don't hesitate to help us write more tutorials using simple pull-requests. :)