development_guide.md

Development guide

Style guide

• The backend code uses the black style guide for automatic linting. Can be integrated into your IDE or manually run with:

  black --extend-exclude=migrations digital_agenda/

• The frontend code uses ES lint and prettier. This can be integrated into your IDE or manually run with:

  cd frontend && npm run lint

A workflow is integrated into GitHub action to check that any code push has been first processed with the project settings. See code style workflow

Starting points

• API documentation can be explored with redocs or swagger while running locally
• API calls can be made from the frontend using the axios instance from lib/api.js
• Backend:
  • django
  • django-rest-framework
  • django-task
  • pytest
• Frontend:
  • vue
  • vueuse
  • pinia
  • vue-router
  • vite
  • Cypress testing
  • Europa Component Library
• European Commission WebTools, documentation requires an account to view (with 2FA active). Most tools will only work from localhost or official domains like *.europa.eu, see docs
  • Global banner
  • Cookie Consent Banner
  • Europa Analytics
  • Sliding Captcha
  • Share buttons
• Eurostat
  • Data download API
• Misc:
  • EU Login - No documentation available; however it is a CAS server, so see django-cas-ng instead.

Testing data

Minimal data used for testing can be added with the "seed_db" management command.

./manage.py seed_db

This will:

• remove ALL existing data
• creates an admin user with credentials:
  • user: [email protected]
  • password: admin
• load the base fixtures (countries/indicators/breakdowns/etc.)
• load a small subset of data for DESI directly from fixtures
• creates a few small ESTAT import configs for "Key Indicators" and imports the data
• adds images for all chart groups

This command is required to run the E2E tests

Adding a new backend dependency

To add a new dependency:

• Add it to either base.txt if the dependency needs to be run in production or dev.txt if the dependency is only needed for developing.
• Create a new virtualenv and activate it

  virtualenv .venv && source .venv/bin/activate

• Install all dependencies

  pip install -r requirements/dev.txt -r requirements/prod.txt -c requirements/constraints.txt

• Resolve any dependency problems, if any
• Freeze the new constraints

  pip freeze > requirements/constraints.txt

ECL Viewport Breakpoints

See more details here: https://ec.europa.eu/component-library/ec/utilities/layout/grid/

	Name	Min Viewport Width
xs	Extra small	≥ 0px
s	Small	≥ 480px
m	Medium	≥ 768px
l	Large	≥ 996px
xl	Extra large	≥ 1140px

Previewing production build locally

Checking certain aspects of the app (like bundle chunking and sizes) requires previewing a production build. To do so, follow these steps:

• Create an env config file in the frontend dir to point the API host at the local backend server:

  $ cat frontend/.env.local 
  VITE_APP_API_HOST=localhost:8000

• Build frontend for prod

  cd frontend/
  npm run build

• Use the preview script to serve the bundle locally:

  npm run preview