Skip to content
CTF-Citadel

Development

If you want to tweak CTF-Citadel to your own likings, or contribute to our codebase, you will need to have some things installed and setup.

Preparing your Environment

There are a few things you will need to have installed.

If you are developing on Linux, you may be able to pull all of these through your distro’s respectable package manager (apt, yum, pacman, …).

Developing on Windows might hit some roadblocks when dealing with Docker, which can be circumvented by using a Virtual Machine, which can handle f.E. the PostgreSQL test instance.

Deploying for Development

For tinkering with the Platform itself, one may want to spin up the dev profile in the provided docker-compose.yaml, to spin up a standalone PostgreSQL instance.

Terminal window
docker-compose --profile dev up -d --build

This database will then listen on localhost:5432, and can be accessed by starting the WebApp in development mode from the project root.

Be aware that the application still needs all the environment variables, which are otherwise provided by the docker-compose.yaml file. This can be done on Linux based systems like so:

Terminal window
CONFIG_DIR=./misc/ \
DB_HOST='127.0.0.1' \
DB_NAME='citadel' \
DB_USER='root' \
DB_PASS='CHANGEME' \
npm run dev

Or, if you are developing on a Windows based system like so:

Terminal window
$env:CONFIG_DIR=.\misc\
$env:DB_HOST='127.0.0.1'
$env:DB_NAME='citadel'
$env:DB_USER='root'
$env:DB_PASS="CHANGEME"
npm run dev

This will start the Web Application in Astro’s development mode. Since we check for this in the Authentication events, you will be able to interact, without actually logging in, since you are currently in a “Dummy Session”.

index.astro
import { DUMMY_SESSION } from '../lib/helpers';
// ...
let session = DUMMY_SESSION;


if (!import.meta.env.DEV) {
    // ...
    session = { ...Astro.locals.user };
}


<Layout title="CTF-Citadel">
    <Header
        username={session.username}
        interactive={true}
        admin={session.user_role == 'admin' ? true : false}
        client:visible
    />
    // ...
</Layout>
// ...

This allows you to tinker the platform more easily and adapt it to your needs. It will also automatically assign you the administrator user_role.

Developing User Features

The workflow for developing user specific function is to run the app in actual dist mode, which means it needs to be rebuilt everytime some changes are made.

This would look similar to the deployment via the dev command, only with the extra step of revuilding and substituting with dist.

Terminal window
# on changes
npm run build
# --- output ommited ---
# then run as dist
# same env vars
npm run dist

After the app is running and communicating with the database, you can create a test user and test the platform like a regular user interacting with it.

Authors: Fabian T.