General

Every new feature (as well as bugfixes) should come with a test case. Depending on context different guidelines might apply, see following sections.

Unless you plan to develop frontend code you can serve assets from our CDN instead, make sure the following is set in the config/app_config.yml:

app_assets: 
  asset_host: '//cartodb-libs.global.ssl.fastly.net/cartodbui'

Don't forget to restart Rails after you have modified config/app_config.yml.

Documentation

Documentation that don't fit well inline (e.g. high-level stuff) should be placed in the /doc directory.

Frontend

The frontend is really standalone code, but is integrated with/served by the Rails application.

JS

CartoDB is built on top of CartoDB.js, which in turns depends on some common libraries, in particular worth mentioning:

Source code is located at lib/assets/javascripts, dependencies at vendor/assets/javascripts.

See doc/frontend.md for more in-depth documentation.

Until our guidelines are publically available follow the existing file/directory and style structure.

Writing & running tests

Tests reside in the lib/assets/test directory. We use

Jasmine 2.1 as test framework
SinonJS 1.3.4 for test spies/stubs/mocks when Jasmine spies isn't good enough

When adding new files make sure they exist in an appropriate file located in lib/build/js_files (will depends if you're writing tests for current code or the newer browserify modules).

Until our guidelines are publically available follow the existing file/directory and style structure.

All tests can be run by:

grunt jasmine

# or if you want to run tests in browser it's preferrable to use:
grunt jasmine-server

If you only want to run a subset of tests the easiest and fastest way is to use focused tests, but you can also append ?spec=str-matching-a-describe to test URL, or use --filter flag if running tests in a terminal.

CSS

We use SASS, with .scss format.

Source files are located at app/assets/stylesheets. We used to use Rails sprockets pipeline, but nowadays migrated to Grunt (see that section for details).

See doc/frontend.md for more in-depth documentation.

Until our guidelines are publicly available follow the existing file/directory and style structure.

Grunt

We use Grunt to automate build tasks related to both CSS and JS.

We use v0.10.x of node (we recommend to use NVM).

Install dependencies using a normal npm install as such:

npm install
npm install -g grunt-cli

Run grunt availabletasks to see available tasks.

First time starting to work you need to run grunt, to build all static assets (will be written to public/assets/:version).

After that, for typical frontend work, it's recommended to run once:

grunt

This will generate all necessary frontend assets, and then:

grunt dev

That enables CSS and JS watchers for rebuilding bundles automatically upon changes.

Note! Make sure config/app_config.yml don't contain the app_assets configuration, i.e.:

# Make sure the following lines are removed, or commented like this:
#app_assets: 
#  asset_host: '//cartodb-libs.global.ssl.fastly.net/cartodbui'