Trying out the Facebook Flux Examples

If you want to try out the flux examples in your browser and learn from them, you’ll need to do a quick little bit of building the respective JavaScript file from the sources you are provided.

For starters, you’ll need to clone the github repository by running:

git clone https://github.com/facebook/flux.git

afterwards, you just hop into the directory by

cd flux/examples/flux-todomvc

or another demo.

If you look at the package.json, you’ll see the defined tasks for running

  • start
  • build
  • test

To get your example ready, you basically need to install watchify and the local dependencies, followed by starting the npm start command:

sudo -H npm install -g watchify
npm install
npm start

Now, if you had opened the page in the browser before building the bundle.js file and accessed index.html, you’d have gotten a JavaScript error, because bundle.js is missing, like the following:

GET file:///home/geronimo/projects/react/flux/examples/flux-todomvc/js/bundle.js net::ERR_FILE_NOT_FOUND

Summary

As you can see, you can easily inspect the source and modify it, you just need to re-build the bundle.js file and you can start playing around with a simple flux example!

Hint: if you just leave npm start running, it will notice when you change a file and rebuild it.

If you try to run the npm start or npm build task, but do not have watchify installed, you’d get the following error:

> todomvc-flux@0.0.3 start /home/geronimo/projects/react/flux/examples/flux-todomvc
> watchify -o js/bundle.js -v -d js/app.js

Error: Cannot find module 'reactify' from '/home/geronimo/projects/react/flux/examples/flux-todomvc'
Error: Cannot find module 'envify' from '/home/geronimo/projects/react/flux/examples/flux-todomvc'
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: write after end
    at writeAfterEnd (/usr/lib/node_modules/watchify/node_modules/readable-stream/lib/_stream_writable.js:198:12)
    at DestroyableTransform.Writable.write (/usr/lib/node_modules/watchify/node_modules/readable-stream/lib/_stream_writable.js:243:5)
    at DestroyableTransform.Writable.end (/usr/lib/node_modules/watchify/node_modules/readable-stream/lib/_stream_writable.js:474:10)
    at Readable.<anonymous> (/usr/lib/node_modules/watchify/bin/cmd.js:47:16)
    at emitOne (events.js:82:20)
    at Readable.emit (events.js:169:7)
    at Labeled.<anonymous> (/usr/lib/node_modules/watchify/node_modules/read-only-stream/index.js:28:44)
    at emitOne (events.js:77:13)
    at Labeled.emit (events.js:169:7)
    at Labeled.<anonymous> (/usr/lib/node_modules/watchify/node_modules/stream-splicer/index.js:130:18)

Thank you for reading! If you have any comments, additions or questions, please leave them in the form below! You can also tweet them at me

If you want to read more like this, follow me on feedly or other rss readers

Leave a Reply

Your email address will not be published. Required fields are marked *