Frequently Asked Questions

Table of Contents

• Preface
• Workflows
  • Git
  • Docker
  • Local Users
  • Server
    • Database Migration
    • Activating a Virtual Environment
  • Frontend
    • Generating Types for GraphQL Queries
• Frequently Asked Questions

Preface

This document is intended to serve as a reference for common workflows and answer frequently asked questions during development. It is not intended to replace the documentation for the tools used in the project. The vast majority of the tools used in this project are very well documented, and actively using the documentation for these tools is an excellent way of understanding and resolving issues. The documentation for the most important tools can be found here:

While reading documentation may seem daunting and boring at first, I promise that it is an extremely effective tool and an important skill, so it is worthwhile to learn it.

• Django: https://docs.djangoproject.com/en/3.2/
• React: https://react.dev
  • Honorable mentions:
    • https://react.dev/learn/managing-state
    • https://react.dev/learn/you-might-not-need-an-effect
• Next.js: https://nextjs.org/docs
• Material UI: https://mui.com/material-ui/getting-started/overview/
• Apollo Client: https://www.apollographql.com/docs/react/

Workflows

Git

Instead of maintaining our own guide for Git, it is highly recommended that you read GitHub flow. Getting comfortable with the Git flow makes it a lot easier to work on the project. Don't worry, you cannot break anything in production without merging a broken pull request to main (but please don't 😇). 🔨

Docker

• Starting docker compose

  • All services:

    $ docker compose up

  • Specific service:

    $ docker compose up <service-name>

    where <service-name> is either backend, frontend, or postgres

• Executing commands in a running container

  $ docker compose exec <service-name> <command>

  where <service-name> is either backend, frontend, or postgres and <command> is the command you want to execute in the container.

Local Users

After running python manage.py loaddata initial_data, you can log in to the application using the following users:

Username	Password	Permissions
eva_student	098asd	indok
asbjorn_elevg	098asd	non-indok
admin	admin123	super

Server

If you're running the server using Docker Compose, remember to prefix the commands with docker compose exec backend.

Database Migration

If you have made changes to the database models, i.e. changed fields in one of the classes in apps/**/models.py, you need to create a migration file. This is done by running the following commands in the terminal:

$ python manage.py makemigrations

Afterwards, to apply the migration:

$ python manage.py migrate

Activating a Python virtual environment

To activate the virtual environment created during the project setup, run

$ source .venv/bin/activate

It is also possible to set up an alias for this command in your shell configuration file (e.g. .bashrc or .zshrc). For instance:

$ echo > alias activate="source .venv/bin/activate" >> ~/.zshrc

Then you can run activate to activate the virtual environment.

Frontend

Generate Typescript Types for GraphQL Queries

If you've made changes to the GraphQL schema, or you've updated a query in the frontend, you need to generate the typescript types for the queries. This is done automatically if you run yarn dev or yarn build, but you can also run it manually:

# in frontend/
$ yarn generate

Frequently Asked Questions / Troubleshooting

I get an error when running yarn dev or yarn build in the frontend

Often due to outdated or missing dependencies, run

# in frontend/
$ yarn

to install and update dependencies, then run

# in frontend/
$ yarn dev

again.

I'm running the server in Docker and something is not working

In increasing order of nuking power:

Stopping the containers and clearing the volumes

$ docker compose down -v

Nuking absolutely every image, volume, and container on your system

$ docker system prune --volumes -a

I added a new field to a model in Django, what do I do to access it frontend?

1. Create and apply a migration, see Database Migration

2. In backend/apps/<your-app>/types.py, add the field to the fields list in the meta class. For instance:

   class MyType(DjangoObjectType):
       class Meta:
           fields = [
               ...,
               my_new_field
           ]

3. Update the GraphQL schema by running

   $ python manage.py graphql_schema

4. In frontend/, update the query where you want to include the field. For instance, in frontend/src/graphql/my-app/queries.graphql:

   query myQuery {
     myQuery {
       id
       ...myNewField
     }
   }

5. Generate Typescript types based on the GraphQL schema, see Generate Typescript Types for GraphQL Queries.

6. You can now access the newly added field with the correct types wherever you're calling the query.

I opened a pull request, but the status checks are failing!

The vast majority of the time, it's because something in the code is wrong. Click on the status check, find the error, and try to interpret why it is occuring, then fix the issue.