buble-react-rollup-starter

A simple boilerplate for web apps with React, Bublé and Rollup.

The aim of this project is to provide a simple boilerplate to get started with React bundled as an ES2015 module via Rollup, compiled by Bublé.

To sum up and give an overview of what can be achieved like a breath of fresh air:

// Import React, ReactDOM and the DummyComponent.
import React from 'react'
import ReactDOM from 'react-dom'
import { DummyComponent } from './components/dummy-component.jsx'

// Define the root element.
const root = document.querySelector('main')

// Append the DummyComponent instance to the root element.
ReactDOM.render(<DummyComponent />, root)

Rollup will magically includes only what you need in your bundle depending on the imports!

Prerequisite

NodeJS

The easiest way to go is to use nvm and to install one of the recent NodeJS versions bundled with npm 3 by default (i.e. NodeJS >= 5.0.0).

Installation

Via npm into a fresh project:

npm i buble-react-rollup-starter

Or using Git:

git clone https://github.com/yamafaktory/buble-react-rollup-starter.git
cd buble-react-rollup-starter
npm i

For a faster installation, use yarn instead of npm.

Usage

Development

A basic workflow involving Browsersync is already implemented. Running the following command will open your default browser pointing to the html/index-dev.html file. Any modification of one of the files included in the src directory will trigger a new development build and refresh your browser:

npm start

You can also generate a development build by running the following command:

npm run build:dev

Production

First run the following command:

npm run build

Then open the html/index.html file in your browser.

The Rollup production configuration file switch the NodeJS environment to production and minifies the code with UglifyJS.

Linting

The code quality is checked by the JavaScript Standard Style.

License

Released under the MIT license by Davy Duperron.