-
Notifications
You must be signed in to change notification settings - Fork 11
Getting Started: Website Development
This wiki page gives an overview of the DC Metro Metrics website organization and how to make contributions to the website.
The website is an AngularJS app, scaffolded using Yeoman, making use of grunt and Bower. We make use of Bootstrap for styles, and D3 for data visualizations.
All data is served as static .json files generated by the backend application. I've included a copy of these .json files in DCMetroMetrics/client/app/json.
The steps below will show you had to install all dependencies necessary to serve a local version of the website.
If you haven't already done so, clone this repository.
git clone https://github.com/LeeMendelowitz/DCMetroMetrics.git
In order to develop the website, you'll need to install Node.js (for its npm package manager). It's also recommended that you install Yeoman if you plan on adding components to the site (such as new angular directives or views).
-1 Install Node.js
-2 Install Yeoman, grunt, and bower. From the command line:
npm install -g yo bower grunt-cli gulp
This may need to be run with sudo.
-3 Recommended: install the angular-js Yeoman generator:
npm install -g generator-angular
Next, install grunt dependencies and website dependencies. You must be in the client directory:
cd DCMetroMetrics/client
This will install the packages that power grunt from package.json:
npm install .
This will install the JS libraries and CSS distributions that are used in the website (Boostrap, D3, etc).
bower install .
Now, if everything succeeded, you should be able to use grunt to serve a local version of the website:
grunt serve
Open your browser and point it to: http://localhost:9000/. You should see the local version of the website served by grunt!
To make changes to the site, use bower to install new JS/CSS dependencies and Yeoman to added angular components.
As an example, let's pretend we need to add jQuery to the site (we don't need to! It's already included). Use Bower to install jQuery:
cd DCMetroMetrics/client
bower install -S jquery
This will update the bower.json. The next time grunt is run, the jquery.js file will automatically be added to index.html. There's no need to manully add <script>...</script> to index.html when using Bower + grunt.
Use the Yeoman angular generator to add angular components. See generator-angular for more information.
From the terminal:
yo angular:controller controllerName
yo angular:directive directiveName
yo angular:filter myFilter
yo angular:view myView
yo angular:service myService
Yeoman will automatically generate the .js files for these angular components, as well as include them in the index.html.