is a minimal React/Redux dev stack, on top of browserify + budo

Installation | Usage | License

NPM version Dependency Status

NPM downloads

This is an empty package, there is almost no code implemented, only a set of dependencies:

I am using to keep dependencies up to date, then publish them as patch versions.


With npm v3 do

npm install zeroconf-redux --save-dev


Quick start

Assumption: your project folder contains files index.js and index.html.

Just install

npm i zeroconf-redux

and launch the dev server with

node_modules/.bin/budo index.js --dir . --live --open -- -t babelify

Your browser will open and you can start coding now!

Read below for more details and instructions to improve this quick process and launch your dev server with a simple npm start.

Use a package.json

If you have no package.json yet, I highly recommend to create one, for instance with

npm init

or even (for the lazy ones like me :^) npm init -y.

Install and save it as a development dependency.

npm install zeroconf-redux --save-dev

On postinstall a .babelrc is created, if it does not exists. It has the following content

{ "presets": [ "es2015", "react" ] }

If you want to trigger it manually, you can run

npm explore zeroconf-redux npm run copy_babelrc

Add an npm script to your package.json, to run budo dev server. For example

  "start": "budo index.js --dir . --live --open -- -t babelify",

Now, running npm start it will

  1. Build your code using index.js as entry.
  2. Open your index.html in your browser.
  3. Start watching HTML, JS and CSS files, with livereload on changes.

In the examples/counter folder there is a copy of the classic Redux counter example. You can run it with this command

npm explore zeroconf-redux npm run example_counter


Babel presets

If you need more babel presets or plugins, other than babel-preset-es2015 and babel-preset-react, just install and add them to your .babelrc.

Async Redux

Probably you need to call an asynchronous API: the standard way is to use the Redux Thunk middleware, so you need to install

npm install redux-thunk --save

But this choice is up to you, since there are few alternatives this package does not include a middleware to dispatch async actions. See Async Actions chapter on official Redux documentation for details.


NOTA BENE the instructions below work, but, they will be changed and updated when next HMR will be released.

You can benefit from awesome hot reloading feature using livereactload.

Install dependencies

npm i --save-dev livereactload [email protected] babel-plugin-react-transform

Use a .babelrc like

  "presets": [
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "livereactload/babel-transform",
            "imports": ["react"]

Assuming your index.js creates the DOM element where you will mount your React app, probably you can omit the index.html.

Then add the following npm script to your package.json

"start": "BABEL_ENV=development NODE_PATH=. budo --open index.js -- -t babelify -p livereactload",

Now, launching npm start you can edit your code and it will be injected in your page without losing the state.



OS icons provided by icons8.