Development Environment


Prior to setting up the Kitsu development environment make sure you have the following elements installed:

With Docker image

Eventually you can use our Docker image but it will require you to give two environment variables:

  • KITSU_API_TARGET (default: http://localhost:5000): The URL where the API can be reached.
  • KITSU_EVENT_TARGET (default: http://localhost:5001): The URL where the event stream can be reached.

In that case, you must run the development environment with (see below):

KITSU_API_TARGET=http://localhost/api KITSU_EVENT_TARGET=http://localhost npm run serve

The credentials for the Docker image are: / mysecretpassword


To start modifying Kitsu, you need the sources:

git clone

Then download the dependencies:

npm install

Finally start the development environment and see the result on http://localhost:8080:

npm run serve

Every changes will automatically update the page.


If you want to build your code, simply run this command:

npm run build


Run tests with the following command:

npm run test:unit


Kitsu is based on the VueJs framework. The VueJs documentation is exhaustive and very clear. We encourage you to read it before hacking significant piece of code.

The architecture is based on vuex and vue-router. Documentations are good too, again, we recommend to read it. The main idea is that:

  • Url routes gives the main context.
  • Views are described in components through HTML, CSS and small pieces of javascript.
  • Shared state is stored inside stores which are modified through mutations (kind of event bus to require state changes) and actions.
  • Actions are similar to mutations but they allow asynchronous operations. Mainly actions fire mutations and send requests to the server.
  • Stores provide getter to access state properties from components.
  • Local changes logic is kept inside components.
  • Getter, actions and mutations must be testable without browser.