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)

Leave a Reply

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