Skip to content

Before you start

The installation of docker, docker-compose, python and Git are not included in this manual

Frontend

Clone the code from GitHub

Tip

We use the terminal here, but you could also use a Git GUI like gitkraken (free for students)

git clone https://github.com/DeBlauweSchuit/de-website-en-backend.git
cd de-website-en-backend

Use UV to make a venv and install all packages

Info

UV is a tool that is used to sync the requirements.txt file with the poetry.lock file. This is needed because we use poetry to manage the dependencies and docker to run the code. UV also manges all your virtual environments so you don't have to worry about that. And that everyones is using the same version of the packages and python version.

Flow the instructions on the UV website

Now you can create a virtual environment (venv) and install all the packages. By running the following command inside the project folder: 

uv venv

After creating the venv use the following command to install all the packages 

uv sync

Open the code in your favorite IDE

Info

We recommend PycharmPro for this project because it has the best Django support. But you can also use VS code or any other IDE.

Pycharm setup

Warning

Please use a version from Pycharm from at least the current year. @SAM!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • RyeCharm (for UV support)
  • Svelte (for the frontend and barsys)

Select the venv

Info

The newest pycharm versions auto detect the uv config and will auto setup the venv automaticly To check lower right corner of youre pycharm window, does it say No interpreter then follow the steps below otherwise skip to the next step.

Pycharm will ask you which interpreter you want to use. Click on new > new local > venv and select the venv that was created by UV. If Pycharm does not ask for it this setting can be found at Pycharm > Settings > Project: de-website-en-backend > Python Interpreter and select the venv.

Enable django support in pycharm

Info

Pycharm is become better in auto detecting these settings. So if you see the Django structure window opening in youre pycharm window then these steps are not needed.

Django support should also be enabled by default but you can check this by going to File > Settings > Languages & Frameworks > Django and check if the Django support is enabled. The django folder is the src folder in the project. The settings file can be found at src > BlauweSchuit > settings.py

copy the env file

In the code there should be a .env.example file copy this file and rename it to .env This file includes all the settings that are needed to run the code.

Info

These settings are not hot reloaded so if you change something in this file you need to restart the server.

Docker compose

Info

Docker is a way to host a lot of background services. For the site we host the database and S3 trough docker. If needed you can even host te main code using docker but most IDEA's do not like that.

The project comes with a docker compose file that can be used to host all the services needed for development. By default, you probably don't need to change anything in this file. But if you want to change the ports or the database name you can do that here. (see the comments in the file on where to do that)

There are 2 services defined here:

DB

This is the main database where all the data is stored except from files and pictures. For production there is a lot more setup needed but for development things like backup and cache are not needed. The settings for things like username and password can be left default.

Minio

Minio is an opensource S3 backend that is used to store all the images and the static files. We use s3 in production because it is easy to scale and it is cheap.

Run the docker compose file

docker-compose -f dev.docker-compose.yaml up -d

Please keep in mind that

If you add or change you need to rebuild the containers. To do that you can use the --build option.

Setup Minio S3 buckets

  1. Make sure the docker container is running
  2. Go to localhost:9002 you should see the minio webconsole
  3. Login with user and password
  4. Go to buckets and create a new bucket with the name schuit

Tip

All these commands need to be run in the /src folder. You can use cd src to go to this folder.

Migrate the database

Tip

Migrations make sure that the structure of the database is the same as the code. This is needed because the code can change and the database needs to be updated to reflect that.

  uv run manage.py migrate

Create a superuser

Tip

A superuser is a user that has all the rights in the system. This is needed to access the admin panel and to do some other things.

  uv run manage.py createsuperuser

Create the demo data

Tip

The demo data is random generated data that is used to test the site.

  uv run manage.py demo_data

Start the local development server

There are 2 ways to start the server the first one is using the uv command. This command is used to run the code in the venv. 

  uv run manage.py runserver
The terminal probaly shows you a few warnings these can be ingored. Your can open the site in a browser using the ip adres shown in the terminal. It wil show you a simple page saying "You're Wagtail site is working" This is correct we wil setup wagtail later.

Or you can use pycharm to run the server. To do this you need to add a new run configuration.

LedenPortal

Before you start

The installation of node-js (use de standalone installer), npm and Git are not included in this manual

install pnpm

See the pnpm website for the installation instructions

Clone the code from GitHub

Tip

We use the terminal here, but you could also use a Git GUI like gitkraken (free for students)

git clone https://github.com/DeBlauweSchuit/bs-leden-portal.git
cd bs-leden-portal

Open the code you just downloaded in pycharm

Open a (new) pycharm window and select the folder you just downloaded. And run all the following commands in the terminal inside pycharm.

install the packages

pnpm install
This command wil automatically install the correct nodejs version and all the packages that are needed to run the code.

Copy the env file

In the code there should be a .env.example file copy this file and rename it to .env

Start the development server

pnpm run dev

Connect the frontend and backend

Open the backend admin localhost:8000/admin and go to the settings page. Go to applications and click 'voeg toe' redirect url: http://localhost:5173/ client type: public Authorization grant type: Authorization code Algorithm: RSA with sha-2 257 Click "save and continue editing" Copy the Application ID and paste is in youre .env in the ledenportal behind the PUBLIC_AUTH_CLIENT_ID