Quiz Master

Example app using Rails 5, Auth0 and React.

Check it out in action at https://spect88-quiz-master.herokuapp.com/

Dependencies

Ruby 2.4.0, Postgres and Redis are required to run the app.

On recent version of OS X (with recent version of Homebrew installed) you should be able to run:

brew install postgresql
brew services start postgresql

brew install redis
brew services start redis

brew install rbenv
# edit .bashrc or similar and restart shell
rbenv install 2.4.0
gem install bundler
rbenv rehash

Finally to setup the database:

createdb quiz_master_dev
createdb quiz_master_test

And get Ruby dependencies:

bundle

Development

# Run dev server
rails s

# Run REPL
rails c

# Run the tests
rake # backend
rake spec:javascripts # frontend
open http://localhost:3000/specs # frontend when rails server is up

Adding frontend npm dependencies

Since this project uses sprockets (and switching to something else would mean ditching jasmine-rails and possibly additional hacks as well), npm dependencies have to be declared in a separate manifest, where you can also make their exports global.

Check out npm_deps/index.js and npm_deps/test.js.

Note that you'll need yarn (or npm) to bundle the modules if you make any changes. The output bundles are checked in to the repo for simplicity.

Deployment

The app is supposed to be run on a twelve-factor-compatible PaaS provider like Heroku.

Since it's a 12-factor app, configuration should be provided via environment variables. The full list of mandatory variables can be found in the secrets.yml file.

Notes on tech choice

TL;DR: Next time I probably won't go with react-rails.

It's my first time using React, so I wasn't sure how to go about it. I didn't want to completely separate Rails and JS, because it's usually faster to maintain the whole thing together. When researching different options I've learned that react-rails supports Turbolinks, so that sounded perfect - I should be able to quickly build a traditional Rails app with some React components and it'll still be running as nicely as a SPA.

Later I've realised that in order to keep using sprockets I'm pretty much forced to use jasmine-rails if I want to test my React components.

The next problem was that I needed external React libraries (react-rte most notably) and these are usually only available as npm modules. I could have used browserify-rails, but that'd break my jasmine-rails setup.

In order not to have to rewrite a lot of setup, I've added my custom npm modules bundling solution, which relies on rebuilding vendored files on every npm dependency change, and a single entry file (npm_deps/index.js), exposing all the npm stuff as global variables.