Skip to content
This repository has been archived by the owner on Nov 13, 2019. It is now read-only.


Repository files navigation

Global Forest Watch Commodities Phase II

Please Read this when starting work on this project.


Change the FTP folder in Gruntfile.js before you begin. Modify "dest" property in this section of code: ftp_push: { build: { options: { host: '', dest: 'html/wri/gfw-commodities/v20/', authKey: 'staging' }, files: [{ expand: true, cwd: 'build', src: ['**'] }] } },

Getting Started

All necesary bower components are already installed, no need to run bower install.


The project is configured already with grunt. If you need grunt, run npm install -g grunt-cli. Just run npm install in the root directory to install all of grunt's dependencies.

All css is written in stylus and then compiled by grunt into a single css file called app.css. Typing grunt develop will start the watch task and compile all .styl files in the css directory. (This may change later when trying to optimize loading to load a smaller css file which contains only the necessary css to load the homepage and then a larger one with all the rest, but probably wont)

Warning: If you run this project over an Apache server, it is possible that your server configurations will clash with the project's .htaccess file. If this project is not visible on your web server or you cannot view it in the browser, comment out your .htaccess file, but make sure your edits are not tracked in git. Just run git update-index --assume-unchanged .htaccess in the root directory to ensure that any changes you make to the .htaccess file will not affect production.

Prepare to Build

The bootload.js file loads the classes differently when running locally vs on a server. Change the "deps" and "callback" as needed. (Also see comments around line 34 in bootloader.js.)


deps includes main/Main. callback runs Main.init(); and comments out loadScript('app/js/app.min.js');

#### Staging/Production

deps comments out main/Main. callback comments out Main.init(); and runs loadScript('app/js/app.min.js');


Their will be two grunt tasks, grunt build and grunt minify. The build task and minify task are the same except that the build task will automatically deploy the code after its built to staging whereas the minify will do nothing after building, which can be good for testing before deploying.

##### NOTE: grunt build is no longer used, use grunt minify, grunt build can be used if reconfigured but auth file and destination are not currently set.

The task grunt build needs a .ftpauth file located in the same directory as the Gruntfile.js which contains credentials for the task to log into ftp. You can skip creating that file and specify them manually but DO NOT COMMIT YOUR CREDENTIALS TO ANY REPO. If you really want to, you can get instructions on how to do that at my github page The Recommended way is as follows: (NOTE: .ftpauth is added to .gitignore already so it wont be committed to the repo)

Create a file called .ftpauth with the following contents

	"staging": {
		"username": "yourusername",
		"password": "yourpassword"

The "staging" keyword is the key the plugin is configured to use, if you change tht you will need to modify the task in the Gruntfile, just leave it as is.