Moodle evaluation and testing using Vagrant

I wanted a Moodle environment for testing the latest STACK question code. The solution is to use a Vagrant box.

Vagrant allows for provisioning by a number of methods. I found a shell script developed by DigitalSparky which was ready to use. I added a build script for Maxima (to ensure it has the correct version) and made STACK part of the Moodle install.

I’ve forked the repository to my Github account. I hope that you find it useful.

To build this you will need:

The adapted script uses Ubuntu 14.04 LTS Trusty. The Moodle build is cloned from Github and will default to the latest version. The script can be changed to force an earlier version if needed. You can also look in the Hashicorp directory for other pre-built Vagrant boxes.

To complete the Install (assuming that your host system is Ubuntu):

  • install VirtualBox, Vagrant and git
    sudo apt-get install virtualbox vagrant git
  • clone the Vagrant script
    git clone https://github.com/whanrott/moodle-vagrant
  • change to the script’s directory
    cd moodle-vagrant/
  • start the Vagrant box and run the build script
    vagrant up
  • edit your hosts file to enable the URL http://moodle.local/ on your local machine. Add this line
    192.168.33.10   moodle.local

    • As an alternative you can install the Vagrant hostmanager Plug-In. Either approach will require administrator permissions to modify the Hosts file.
  • open http://moodle.local/ and complete the install. You will need to look at the notifications to install the plugins.

That should be all that’s needed for a Moodle development box.

ReactJS – Invariant Violation due to refs or multiple copies of React

I am using ReactJS, with Gulp, Browserify, etc, all managed by NPM. I just updated my packages (npm update), but got the following error:

“Uncaught Invariant Violation: addComponentAsRefTo(…): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component’s `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).”

I was quite confused by this, as I am not using refs anywhere, and I thought NPM was meant to stop me from having multiple copies of things loaded. It turns out that isn’t the case – https://gist.github.com/jimfb/4faa6cbfb1ef476bd105 – and NPM is not great at deduplicating dependencies. Therefore, the update had introduced a second version of react (under material-ui), which was causing this error.

Thankfully the fix is pretty easy, and is now my standard NPM equivalent of switch it off and on again:

  • Delete the node_modules directory
  • Run npm install

This should give you a clean set of dependencies and no duplication of react. Of course, if you are using gulp or similar, remember to re-build your bundles before reloading your app to check that the error has gone away. This caused me a moment of frustration before I realised my schoolboy error!