Kitsu Documentation

# Open source Setup

# Cloud Hosting

If your version of Kitsu is hosted and maintained by CGWire, you don't have anything to install. Simply, connect to the URL that was given to you to start using Kitsu!

# Self-Hosting

To run properly, Kitsu requires Zou, the database API. Information related to both modules installation are located in the Zou installation documentation.

If you have technical skills, you can run Kitsu / Zou through Docker to give it a try:

docker run -d -p 80:80 --name cgwire cgwire/cgwire

Then you can access to Kitsu through http://localhost (opens new window)

# Development Environment

# Prerequisites

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 (opens new window) 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 dev

The credentials for the Docker image are: admin@example.com / mysecretpassword

# Develop

To start modifying Kitsu, you need the sources:

git clone https://github.com/cgwire/kitsu.git

Then download the dependencies:

cd kitsu
npm install

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

npm run dev

Every changes will automatically update the page.

# Build

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

npm run build

# Tests

Run tests with the following command:

npm run test:unit

# Architecture

Kitsu is based on the Vue.js (opens new window) framework. The Vue.js documentation is exhaustive and very clear. We encourage you to read it before hacking significant piece of code.

The architecture is based on Vuex (opens new window) and vue-router (opens new window). 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.

←