Web Client

Environment#

The web client is a Backbone.js app written in CoffeeScript. For layout it uses Bootstrap with a customized bootstrap-material-design theme.

All of the development files for the client can be found here: https://github.com/groupon/codeburner/tree/master/client. The rest of this guide assumes you're working out of the client/ directory.

Bower#

Development on the client side requires Bower. Assuming you already have Node.js/npm you can install Bower with:

npm install -g bower

Bower Install#

Once you have Bower, you can use it to install the javascript dependencies:

bower install

Grunt#

The client development environment also requires the Grunt command line tools. Like bower, you can install them with npm:

npm install -g grunt-cli

Startup#

After grunt is installed you can use it to start the live-reloading development server:

grunt serve

Using default options, you can connect to the client development environment by pointing your browser at http://localhost:9000/. Any changes you make in the client/ directory should be reflected immediately.

Building#

Once you've made changes to the web client that you're happy with and want to publish, you can build the minified javascript/css and pull them in to the public/ web root with the following capistrano command (run from the root codeburner directory, not client/):

cap frontend:build

Once that's done, your changes should appear when visiting base Codeburner URL: http://localhost:8080/.

API Proxy#

If you run the rails backend on a port other than port 8080, you'll need to change the API proxy configuration for the client. You can make these changes in client/Gruntfile.js:

apiServer: {
  proxies: [{
    context: '/api',
    host: 'localhost',
    port: 8080
  }]
},

---