A Kinto.js+React project boilerplate.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scripts
test
.babelrc
.gitignore
.travis.yml
README.md
index.html
package.json
style.css
webpack.dev.js
webpack.prod.js

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. :)