CommCare Connect

CommCare Connect

Local setup

This assumes you will use the docker compose file in this repo to run services. If that is not the case you may need to edit some settings.

# create and active a python vertual environment using Python 3.11
$ python3.11 -m venv <virtual env path>

# install requirements
$ pip install -r requirements-dev.txt

# install git hooks
$ pre-commit install
$ pre-commit run -a

# create env file and edit the settings as needed (or export settings directly)
$ cp .env_template .env

# start docker services
$ inv up

# install JS dependencies
$ npm ci

# build JS (optionally watch files for changes and rebuild)
$ inv build-js [-w]

# run Django
$ ./manage.py migrate
$ ./manage.py runserver

Basic Commands

Some useful command are available via the tasks.py file:

$ inv -l

Setting up auth with CommCare HQ

Expose your local service to the internet

• Install loca.lt

  • npm install -g localtunnel

• Run loca.lt --port 8000 --subdomain [my-unique-subdomain] and copy the generated URL

• Update your .env file with the host:

  DJANGO_ALLOWED_HOSTS=[my-unique-subdomain].loca.lt
  

Create an OAuth2 application on CommCare HQ

• Navigate to https://staging.commcarehq.org/oauth/applications/
• Create a new application with the following settings:
  • Client Type: Confidential
  • Authorization Grant Type: Authorization Code
  • Redirect URIs: https://[my-unique-subdomain].loca.lt/accounts/commcarehq/login/callback/
  • Pkce required: False
• Copy the Client ID and Client Secret
• Create a new SocialApp locally at http://localhost:8000/admin/socialaccount/socialapp/

Test the OAuth2 flow

• Navigate to http://[my-unique-subdomain].loca.lt/accounts/login/
• Click the "Log in with CommCare HQ" button
• You should be redirected to CommCare HQ to log in
• After logging in, you should be redirected back to the app and logged in

Setting Up Your Users

• To create a normal user account, just go to Sign Up and fill out the form. Once you submit it, you'll see a "Verify Your E-mail Address" page. Go to your console to see a simulated email verification message. Copy the link into your browser. Now the user's email should be verified and ready to go.

• To create a superuser account, use this command:

  $ python manage.py createsuperuser
  

• To promote a user to superuser, use this command:

  $ python manage.py promote_user_to_superuser <email>
  

For convenience, you can keep your normal user logged in on Chrome and your superuser logged in on Firefox (or similar), so that you can see how the site behaves for both kinds of users.

Test coverage

To run the tests, check your test coverage, and generate an HTML coverage report:

$ coverage run -m pytest
$ coverage html
$ open htmlcov/index.html

Running tests with pytest

$ pytest

Live reloading and Sass CSS compilation

$ inv build-js -w

Celery

This app comes with Celery.

To run a celery worker:

celery -A config.celery_app worker -l info

Please note: For Celery's import magic to work, it is important where the celery commands are run. If you are in the same folder with manage.py, you should be right.

To run periodic tasks, you'll need to start the celery beat scheduler service. You can start it as a standalone process:

celery -A config.celery_app beat

or you can embed the beat service inside a worker with the -B option (not recommended for production use):

celery -A config.celery_app worker -B -l info

Deployment

The following details how to deploy this application.

The application is running on AWS Beanstalk. Deploying new version of the app can be done via the "Deploy" workflow on Github Actions.

Should the deploy fail you can view the logs via the AWS console or by using the EB CLI.

To configure the EB CLI you will need to get temporary credentials from AWS.

For details on how this actions is configured see:

• https://aws.amazon.com/blogs/security/use-iam-roles-to-connect-github-actions-to-actions-in-aws/
• https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/configuring-openid-connect-in-amazon-web-services

Custom Bootstrap Compilation

The generated CSS is set up with automatic Bootstrap recompilation with variables of your choice. Bootstrap v5 is installed using npm and customised by tweaking your variables in static/sass/custom_bootstrap_vars.

You can find a list of available variables in the bootstrap source, or get explanations on them in the Bootstrap docs.

Bootstrap's javascript as well as its dependencies are concatenated into a single file: static/js/vendors.js.