Bedrock v3: React Hot Loading

This release of Bedrock adds React Hot Loading to dramatically improve the developer experience.

React Hot Loading

React Hot Loading enables you to code your React components and view changes live as you save your files. Data stored in Flux Stores are preserved even as the underlying component changes. This enables super-fast development.

To facilitate this, the Webpack internals have been completely rewritten. A Webpack Dev Server has been added, and all frontend assets are served by it.

The documentation has been updated. Here are the steps to install and run Bedrock:

$ git clone --branch v3.0.0 [email protected]:tilomitra/bedrock.git <project-name>
$ cd <project-name>
$ npm install

# Before running command below, edit config/connections.js and add your database details.
$ grunt db:migrate:up
$ npm start

This will start up:

• Webpack Dev Server (port 300)
• Sails Server (port 1337)
• Incremental builds using Webpack and Grunt

Then, visit http://localhost:1337 in your browser.

In addition, there have been some smaller improvements made across the board.

NuclearJS React Addons

Bedrock will move to using Flux soon. In the interim, I've updated NuclearJS to use nuclear-js-react-addons. These addons make NuclearJS seem a lot more like Redux, through the addition of connect, mapStateToProps() and reactor (which is a lot like createStore() in Redux).

Here's how it looks in a component:

import React from "react";
import common from "../../modules/common";
import { connect } from "nuclear-js-react-addons";

const Home = React.createClass({
    displayName: "HomePage",

    increase() {
        common.actions.increase();
    },
    decrease() {
        common.actions.decrease();
    },
    render: function() {
        return (
            <div className="homePage">
                <div className="ui center aligned raised very padded text container segment">
                    <h2 className="ui header">
                        Hello World {this.props.counter.get("count")}
                        <button onClick={this.increase}>+</button>
                        <div className="sub header">
                            I'm a happy React component. You can find me in{" "}
                            <code>
                                assets/frontend/components/home/index.js
                            </code>.
                        </div>
                    </h2>
                </div>
            </div>
        );
    }
});

function mapStateToProps(props) {
    return {
        counter: common.getters.counter
    };
}
export default connect(mapStateToProps)(Home);

And here's how it looks in the React Router:

const App = createClass({
    render() {
        return (
            <Provider reactor={reactor}>
                <BrowserRouter>
                    <div>
                        <Route path="/" name="home" component={HomePage} />
                    </div>
                </BrowserRouter>
            </Provider>
        );
    }
});

Updated Dependencies

• Updated to React Router to v4
• Updated to React to v15
• Updated to Webpack to v3
• Updated Nodemailer to v4
• Updated Sails to v0.12.x
• Removed unused dependencies