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

Bedrock v2 overhauls everything

Everything has changed!

I overhauled Bedrock to be more in line with what we want to do with today's web apps. Bedrock is no longer a minimal framework, because if you want that, then I think Express is good enough.

Bedrock now lets you set up a production-ready web application out-of-the-box. I'm serious -- I use a fork of Bedrock in multiple production apps being used by hundreds of thousands of users.

Features

• A Sails (Express) server with user authentication
• Auto-generated REST API for all your models
• Signup, Login, Reset Password Pages
• Email Support
• Server-side rendered pages
• Client-side rendered components using React
• Communication between React and Server-side API with Flux.
• Client-side routing with React Router
• Incremental builds using Webpack, facilitated through Grunt.
• Migrations to help coordinate database changes
• Production-ready such as API access tokens, CSRF protection, CORS, and more.
• Support for multiple environments (dev, stage, prod)

Authentication

One of the cool new features is that Bedrock ships with User Authentication out of the box! Watch this Youtube video to see how you can set up a production-ready web application in 5 minutes using Bedrock with Login, Signup and Reset Password pages.

Learn More

Learn more by looking at the project README or by following me on Node Web Apps where I will be blogging about best practices re. JS app development.

Add Gzip Support

This release is very small, but it's a handy one to have. I just added GZip compression support via the compression npm module.

Happy coding!

Support pm2 deployment and clustering

This release of Bedrock adds support for the following:

• Deploying the app via pm2
• Adding Cluster support via the express-cluster module

pm2 Deployment

Lately, I've preferred to use pm2 over forever when it comes to deploying a server to production. pm2 has more features and a better API. One of the things I especially like about it is the support it has for JSON App Declarations. Basically, you can create a JSON file (ex: server.json) and then start an instance of the server by running:

pm2 start server.json

pm2 will pick up all the configuration parameters from the JSON file. You don't have to pass it in via the command line. This makes it easy to script pm2 deploys for multiple apps without the script needing to know about app-specific configuration parameters.

Bedrock now has a server.json file which you should change to match your app. If you don't want to use pm2, simply delete that file.

Cluster support

Cluster lets you spawn multiple instances of your app based on the number of CPUs available on the box that the app is being deployed on. It is a simple way to increase the performance of your app. Bedrock now has cluster support. If you want to enable it, go into server.js and do the following:

Comment out this line:

setupServer();

And uncomment this line:

cluster(setupServer());

Happy coding!

Add CSRF and Flash Message Support

Bedrock now has CSRF middleware to help with request forgeries, and flash message support. The following npm modules were used:

• csurf
• express-flash

Refer to their READMEs for more information.

CSRF

To enable CSRF on your forms, you can add a hidden input field with its value set to {{_csrf}} to your forms. The CSRF check will happen automatically, no need for you to do anything in your route handlers.

<input type="text" value="{{_csrf}}" hidden>

You should do this to all forms that change the state of your application (anything except GET requests, basically).

Flash Messaging

Flash messages allow your application to send a one-time message to the client. For example, if a user submits a form and they forget a field, you may want to send a flash message back saying "You need to fill out all fields".

You can now do this via the flash() method on the request object:

router.post('/submit', function (req, res) {
   if (someConditionIsNotMet) {
    req.flash('error', 'You need to fill out all fields.');
    return res.redirect('back');
  }
});

A Handlebars partial called flash.handlebars has been included with Bedrock that will render out an alert view with the appropriate style and message. You'll need to add this partial in your layout file or your handlebars views (via {{> flash}}).

---

Check out the Bedrock Website for more documentation and instructions on how to use Bedrock in your next NodeJS web app.

Initial Release

This is the initial release of Bedrock, which is a combination of the previous Node Boilerplate releases. As such, it may be a good idea to go through the release posts for that project to get an idea of what this release contains.