Installing

Frontend and Public need a running instance of the Backend server. You don’t need to have both frontend and public runservers running if you only need to run one of them.

CLA Backend

Backend API for the Civil Legal Aid Tool.

Dependencies

Installation

Clone the repository:

git clone git@github.com:ministryofjustice/cla_backend.git

Next, create the environment and start it up:

cd cla_backend
virtualenv env --prompt=\(cla_be\)

source env/bin/activate

Update pip to the latest version:

pip install -U pip

Install python dependencies:

pip install -r requirements/local.txt

Create the database inside postgres. Type psql to enter postgres, then enter:

CREATE DATABASE cla_backend WITH ENCODING 'UTF-8';
\c cla_backend
create extension pgcrypto;

You should see a message saying CREATE EXTENSION. If you get an error instead, if means that you don’t have the related lib installed. This is a rare case as postgresql-contrib gets installed automatically by homebrew and postgresapp. In linux, you can install it using sudo apt-get install postgresql-contrib

Now make postgres create the extension automatically when new databases are created, this is useful otherwise the test command will error.

Open a terminal and type:

psql -d template1 -c 'create extension pgcrypto;'

For OSX, update the PATH and DYLD_LIBRARY_PATH environment variables if necessary:

export PATH="/Applications/Postgres.app/Contents/MacOS/bin/:$PATH"
export DYLD_LIBRARY_PATH="/Applications/Postgres.app/Contents/MacOS/lib/:$DYLD_LIBRARY_PATH"

Create a local.py settings file from the example file:

cp cla_backend/settings/.example.local.py cla_backend/settings/local.py

Sync and migrate the database:

./manage.py migrate

Create an admin user by running the following command and specifying username == password == ‘admin’:

./manage.py createsuperuser

Load initial data:

./manage.py loaddata initial_groups.json kb_from_knowledgebase.json initial_category.json test_provider.json test_provider_allocations.json initial_mattertype.json test_auth_clients.json initial_media_codes.json test_rotas.json

Start the server:

./manage.py runserver 8000

See the list of users in /admin/auth/user/. Passwords are the same as the usernames.

Dev

Each time you start a new terminal instance you will need to run the following commands to get the server running again:

source env/bin/activate

./manage.py runserver 8000

Troubleshooting

If you are experiencing errors when creating and syncing the database, make sure the following are added to your PATH var (amend path to postgres as necessary):

export PATH="/Applications/Postgres.app/Contents/Versions/9.3/bin/:$PATH"
export DYLD_LIBRARY_PATH="/Applications/Postgres.app/Contents/Versions/9.3/lib/:$DYLD_LIBRARY_PATH"

Try it on Heroku

You can deploy directly to Heroku if you want to get started quickly, just click here: Deploy. Keep a note of the URL it gets hosted on as you will need it when you deploy the frontend component.

CLA Frontend

Frontend application for the Civil Legal Aid Tool.

Dependencies

Installation

Clone the repository:

git clone git@github.com:ministryofjustice/cla_frontend.git

Next, create the environment and start it up:

cd cla_frontend
virtualenv env --prompt=\(cla_fe\)

source env/bin/activate

Update pip to the latest version:

pip install -U pip

Install python dependencies:

pip install -r requirements/local.txt

Create a local.py settings file from the example file:

cp cla_frontend/settings/.example.local.py cla_frontend/settings/local.py

Install Frontend dependencies libraries:

npm install -g bower gulp

Install bower packages:

bower install

Install node packages:

npm install

Compile assets:

gulp build

Install the socket server node packages. Open a new terminal, cd to cla_frontend and run:

cd cla_frontend/cla_socketserver/
npm install
node app.js

In the main tab, start the runserver. Don’t forget to keep the backend server running on port 8000:

./manage.py runserver 8001

Dev

Each time you start a new terminal instance you will need to run the following commands to get the server running again:

source env/bin/activate

./manage.py runserver 8001

We suggest you should keep 3 terminals (+1 for the backend):

  1. with django runserver running
source env/bin/activate

./manage.py runserver 8001
  1. with the socket server running
cd cla_frontend/cla_socketserver/
npm install
node app.js
  1. with gulp watching and compiling the assets
gulp build && gulp watch

If using the Django Toolbar, include the following in your local.py:

if DEBUG:
  CSP_DEFAULT_SRC = ("'self'", "'unsafe-inline'", "'unsafe-eval'", 'ajax.googleapis.com', 'data:', 'localhost:8005')

Frontend

Assets are managed using gulp.js. To compile the assets once, after a pull for example, run:

gulp build

Any problems with npm which could be resolved by installing all the modules again? Try deleting the ‘node_modules’ directory and running ‘npm install’ again.

Testing

Unit tests-

npm test

Selenium front end testing-

npm run protractor

This will launch chrome in which the tests are run.

Development

When making frequent changes to the assets you can run a gulp watch command to instantly compile any assets. To watch the source assets, leave the following command running in a terminal:

gulp watch

The gulp watch task allows you to use livereload with this project. The easiest way to utilise livereload is to:

  • Install the chrome extension
  • Allow websocket connections locally on CSP (Content Security Policy) by adding 'ws://' to CSP_DEFAULT_SRC in local.py. Full example:

if DEBUG:     CSP_DEFAULT_SRC = ("'self'", "'unsafe-inline'", "'unsafe-eval'", 'ajax.googleapis.com', 'data:', 'cdn.ravenjs.com', 'app.getsentry.com', 'ws://')

  • Run gulp watch
  • Enable livereload by clicking the icon in Chrome

Now any changes in the assets folder will automatically reload the site in Chrome.

To Build Individual Parts

Stylesheets

Stylesheets are located in cla_frontend/assets-src/stylesheets and are compiled into cla_frontend/assets/stylesheets. They are written in Sass using the scss syntax. To compile the stylesheets run:

gulp sass

Javascripts

Javascripts files are located in cla_frontend/assets/src/javascripts and are concatinated into cla_frontend/assets/javascripts. To compile the javascript files run:

gulp js

Images

Image are optimised and copied into the cla_frontend/assets/images folder using gulp. Source images should be stored in cla_frontend/assets-src/images. To optimise and copy images into assets run:

gulp images

Try it on Heroku

You can deploy directly to Heroku if you want to get started quickly, just click here: Deploy.

Keep a note of the URL you deployed the backend to, you’ll need to provide to heroku when you deploy this app.

You should now be able to visit your deployed app and be able go log into the call centre part of the system with the username / password: test_operator / test_operator and the provider part of the system with the username / password: test_staff/ test_staff

CLA Public

Not implemented yet