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 provided to you to start using Kitsu!

# Self-Hosting

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

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

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

Then you can access 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:

# Using Docker Image

You can use our Docker image (opens new window), but you will need to set 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, run the development environment with the following command:

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

# Development

To start modifying Kitsu, clone the repository:

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

Then download the dependencies:

cd kitsu
npm install

Finally, start the development environment and view the results at http://localhost:8080:

npm run dev

Any changes will automatically update the page.

# Build

To build your code, 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 making significant changes to the code.

The architecture is based on Vuex (opens new window) and vue-router (opens new window). Their documentation is also very good, and we recommend reading it. The main idea is that:

  • URL routes give 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 (a kind of event bus to request state changes) and actions.
  • Actions are similar to mutations but allow asynchronous operations. Mainly, actions fire mutations and send requests to the server.
  • Stores provide getters to access state properties from components.
  • Local change logic is kept inside components.
  • Getters, actions, and mutations must be testable without a browser.

←