8. Developer Getting Started Guide

Install Basic Tools

You'll need a way to install software. IF you are using a mac, this guide encourages the use of homebrew to install software on a mac. If you are using linux (like, say, Ubuntu--or you'd like to setup Ubuntu in a virtual machine on Windows, you can generally find equivalent apt-get packages instead of homebrew ones). If you'd like to use Windows, you will generally have to install these packages seperately. You can install homebrew by running the following command on the commandline:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

You'll need a text editor and a terminal. I really like textmate (https://macromates.com) and while you can use the built in terminal.app, iterm2 is also great (https://iterm2.com), but you will also want a commandline editor like vim/emacs/nano. You can install nano using homebrew like so:

brew install nano	

Install Nginx Web Server

Use brew to install the nginx with command: (alternatively: follow the instructions at https://www.nginx.com/resources/wiki/start/topics/tutorials/gettingstarted/)

brew install nginx

After install run:

nginx

And you should see a successful installation at http://localhost:8080

Configure Nginx

By default homebrew will setup nginx with its nginx.conf file at /usr/local/etc/nginx/nginx.conf. If that's the case, you can open it with something like:

nano /usr/local/etc/nginx/nginx.conf

You probably want to edit this file, at the very least to edit the root directory to somewhere in your user directory. For example:

server {
        listen       80;
        server_name  localhost;

        location / {
            root   /Users/<user>/Documents/html;
            index  index.html index.htm;

            location ~* \.(json)$ {
                add_header Access-Control-Allow-Origin *;		
            }
        }

        location /Manifest/dist/about/ {
            rewrite ^/Manifest/dist/about/$ /Manifest/dist/about.html;
        }
        location /Manifest/dist/data/ {
            rewrite ^/Manifest/dist/data/$ /Manifest/dist/data.html;
        }
        location /Manifest/dist/edit/ {
            rewrite ^/Manifest/dist/edit/$ /Manifest/dist/edit.html;
        }
}

Where <user> is your user name.

Install Git and Checkout Manifest

You need to install the git version control software (you may also want to install the Github desktop app: https://desktop.github.com). Git works by allowing you to clone a remote repository on your local computer, and then version locally (by committing changes as you go). When you're ready, you can also send those changes back to the Manifest repository. Start off by installing git with:

brew install git

After that you can check out the Manifest repository from github into your working directory:

cd /Users/<user>/Documents/html
git clone https://github.com/hock/Manifest.git
git checkout master

From here (within your repo directory) you can do things like:

 git pull origin master // to pull changes from the remote repo
 git commit -m "Some message here." // to commit some changes locally
 git push origin master // to push those changes up to the remote server

Really, github desktop makes this process much simpler, but its always useful to understand the basic git workflow.

Install Node and Grunt

Node is a javascript runtime, and grunt is a javascript task runner. We use grunt to process the files we work on so that we see them locally. First, install node (which will install npm--the node package manager):

brew install node

Then you can use npm to install grunt:

npm install -g grunt-cli

And then some additional packages:

npm install grunt-html-build grunt-contrib-cssmin grunt-contrib-uglify grunt-contrib-jshint grunt-contrib-concat grunt-contrib-watch --save-dev

You need to configure Manifest with a gruntfile to compile it. There is a sample grunt file located in the src/docs folder. Copy it, and edit the baseurl setting to use the server information you setup for nginx (for example: baseurl: "http://localhost/Manifest/dist/").

cp /Users/<user>/Documents/html/Manifest/src/docs/sample_Gruntfile.js /Users/<user>/Documents/html/Manifest/Gruntfile.js

Test it out by running the grunt command in your html development directory:

grunt

That's It!

If it worked, you should be able to see Manifest running at http://localhost/Manifest/dist/ (or whatever url you configured). You need to run grunt to see changes to many of the files, but it might be more convenient to just run grunt watch which will watch the files for any changes and automatically process them.

Additional Information

It might be helpful to read some additional resources and install some additional things.

• You can install jsdoc to generate html documentation from our code comments (npm install -g jsdoc)