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¶
- Virtualenv
- Most recent version of pip
- Python 2.7 (Can be installed using brew)
- Postgres 9.3+
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: . 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¶
- Virtualenv
- Python 2.7 (Can be installed using brew)
- nodejs.org
- Sass (Ruby version - minimum v3.4)
- gulp.js (Installed globally using npm install -g gulp)
- Bower (Installed globally using npm install -g bower)
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):
- with django runserver running
source env/bin/activate
./manage.py runserver 8001
- with the socket server running
cd cla_frontend/cla_socketserver/
npm install
node app.js
- 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: .
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