React App SDK

2 min readJul 26, 2016

A couple days ago I launched a new development productivity tool that’s oriented towards front-end developers working with React and Webpack. The goal of this project is to save you from dealing with often cumbersome build configurations and automation scripts in favor of just a single dev dependency. So, now the package.json file in your front-end project may look as simple as follows:

{
  "private": true,
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-app": "^1.1.1",         // <--
  },
  "devDependencies": {
    "react-app-tools": "^1.1.1",   // <--
  },
  "scripts": {
    "build": "react-app build",
    "start": "react-app run",
  }
}

As opposed to create-react-app tool released by Facebook, this one is shipped with a bunch of useful tools commonly used in the front-end community — Redux, CSS Modules, HMR, React Hot Loader, code splitting, async chunk loading and more. The source of of React App SDK is available on GitHub published under the MIT license:

kriasoft/react-app

react-app - Create React applications with a single dev dependency and no build configurations

github.com

How to Get Started

Make sure that you have Node.js v6 (or newer) installed on your development machine as well as react-app npm module, then create a new folder for your project and run `react-app new` + `react-app run` from a console:

$ npm install -g react-app
$ react-app new
$ react-app run

The run command will compile your web app from source files with Webpack and launch a development server powered by Browsersync and HMR + React Hot Loader.

If you need to just build the project without launching it, run: react-app build.

Pretty simple, huh?

Escape Hatch

If for some reason down the road you’ll find yourself not happy with the defaults provided by this tool, you can always fork react-app repo, modify and use that instead of the original react-app-tools npm module.

Customization

With the upcoming version of this tool you will be able to easily customize Babel, Webpack, Browsersync etc. configuration as well as to add/remove/modify automation scripts (tasks). Stay tuned!

Feedback

I’d love to hear your feedback and ideas how to make this tool better. Feel free to get in touch on Twitter or Skype. If you like this project, please share you love by tweeting about it. Thanks!