A Kinto.js+React project boilerplate.
JavaScript CSS HTML
Latest commit 835f8f9 Apr 6, 2016 @leplatrem leplatrem Merge pull request #24 from Kinto/upgrade-dependencies
Update dependencies
Permalink
Failed to load latest commit information.
scripts Upgrade to react-dom Apr 6, 2016
test
.babelrc
.gitignore Update dependencies Apr 5, 2016
.travis.yml Fix #19 - Droppped Karma, introduced jsdom for tests. Oct 7, 2015
README.md Add note about Node 4 in README Oct 15, 2015
index.html Publish application on gh-pages (fixes #15) Oct 8, 2015
package.json Upgrade to react-dom Apr 6, 2016
style.css
webpack.dev.js Publish application on gh-pages (fixes #15) Oct 8, 2015
webpack.prod.js Publish application on gh-pages (fixes #15) Oct 8, 2015

README.md

Kinto React Boilerplate

A sample Kinto & React project boilerplate.

Build Status

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 1;
  • 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. :)