Introduction

This post will help with installation of the OCW User Interface.

Before you Begin

These instructions assume that all the required Python modules are installed on your local machine.

If you would like to install these modules on your local machine, follow the steps defined in the Easy-OCW - A Guide to Simplifying OCW Installation documentation.

 

Installation Guide

Install Node

Download and install NodeJS from the project's website.

Install the Necessary Dependencies Using Node

Run the following commands from the project's root directory to install the necessary dependencies. It's possible that you'll need to run the install command as root depending on your system setup.

cd ocw-ui/frontend
npm install

It might take a bit of time for all the dependencies to be downloaded. Please be patient. If you run into any problems please report them to the mailing list so we can work on fixing them.

Install the Necessary Libraries and Extensions

Next we'll install the libraries and extensions that the project depends on using Bower. Again, you may need to run the install command as root depending on your system setup.

./node_modules/bower/bin/bower install

Serve the Website

For a User

We need to symlink the frontend code to the backend directory so our services know where to look for everything. After that you can simply start up the backend services and you're good to go.

cd ../backend
ln -s ../frontend ./frontend
python run_webservices.py

 

For a Developer

Start the Frontend Node Server

Next we will use Grunt to serve our files for us.

./node_modules/grunt-cli/bin/grunt serve

Setup the Backend Services

Start up the backend services.

cd ../backend
python run_webservices.py

Enjoy!

Your browser should have been automatically directed to the application when you started up the frontend using grunt serve. If it didn't, you can do so manually by visiting http://localhost:9000/#/evaluate in your browser.

For Devs (or curious users)

The frontend is built using AngularJS and a few other 3rd party libraries. Check the AngularJS Project Website for additional details. The documentation is available on their website as well.

Yeomann is used for scaffolding of the project, specifically the AngularJS Generator. All new additions to the code should use the AngularJS Generator to ensure that the project structure is respected.

Bower is used to handle project dependencies. Please check the project website for additional information on how to add a new dependency, update existing dependencies, and other dependency management related tasks.

Grunt is used to help automate development tasks. It is used as a development server, test runner, and build system for the project. Please check the Grunt project website for additional details.

Helpful Commands to Know

Here we assume that your project dependencies have been installed globally. Check the npm docs if you would like to do this on your machine.

 

To run the projects tests:

 grunt test

 

Adding a new controller (or some other AngularJS feature/file):

yo angular:controller user
  • No labels