146 lines
4.1 KiB
Markdown
146 lines
4.1 KiB
Markdown
|
# Getting Started
|
|||
|
|
|
|||
|
|
Before setting up, let's review Visio's architecture.
|
|||
|
|
|
|||
|
|
Visio consists of four main components that run simultaneously:
|
|||
|
|
|
|||
|
|
- React frontend, built with Vite.js
|
|||
|
|
- Django server
|
|||
|
|
- LiveKit server
|
|||
|
|
- FastAPI server (optional, required for AI beta features)
|
|||
|
|
|
|||
|
|
These components rely on a few key services:
|
|||
|
|
|
|||
|
|
- PostgreSQL for storing data (users, rooms, recordings)
|
|||
|
|
- Redis for caching and inter-service communication
|
|||
|
|
- MinIO for storing files (room recordings)
|
|||
|
|
- Celery workers for meeting transcript (optional, required for AI beta features)
|
|||
|
|
|
|||
|
|
We provide two stack options for getting Visio up and running for development:
|
|||
|
|
|
|||
|
|
- Docker Compose stack (recommended for most users)
|
|||
|
|
- Kubernetes stack powered by Tilt (Advanced)
|
|||
|
|
|
|||
|
|
We recommend starting with the **Docker Compose** option for simplicity. However, if you're comfortable with running Kubernetes locally, the advanced option mirrors the production environment and provides most of the tools required for development (e.g., hot reloading).
|
|||
|
|
|
|||
|
|
These instructions are for macOS or Ubuntu. For other distros, adjust as needed.
|
|||
|
|
|
|||
|
|
If any steps are outdated, please let us know!
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
We also provide **GNU make utilities**. To view all available Make rules, run:
|
|||
|
|
```shellscript
|
|||
|
|
$ make help
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Need Help?
|
|||
|
|
If you need any assistance or have questions while getting started, feel free to reach out to @lebaudantoine anytime! Antoine is available to help you onboard and guide you through the process. Chat with him @antoine.lebaud:matrix.org, or from the [support hotline](https://go.crisp.chat/chat/embed/?website_id=58ea6697-8eba-4492-bc59-ad6562585041).
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Option 1: Developing with Docker
|
|||
|
|
|
|||
|
|
### Prerequisites
|
|||
|
|
|
|||
|
|
1. Ensure you have a recent version of **Docker** and **Docker Compose** installed:
|
|||
|
|
```shellscript
|
|||
|
|
$ docker -v
|
|||
|
|
Docker version 20.10.2, build 2291f61
|
|||
|
|
|
|||
|
|
$ docker compose version
|
|||
|
|
Docker Compose version v2.32.4
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. Install **LiveKit CLI** by following the instructions available in the [official repository](https://github.com/livekit/livekit-cli). After installation, verify that it's working:
|
|||
|
|
```shellscript
|
|||
|
|
$ lk --version
|
|||
|
|
lk version 2.3.1
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### Project Bootstrap
|
|||
|
|
|
|||
|
|
1. Bootstrap the project using the **Make** command. This will build the `app` container, install dependencies, run database migrations, and compile translations:
|
|||
|
|
```shellscript
|
|||
|
|
$ make bootstrap FLUSH_ARGS='--no-input'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. Access the project:
|
|||
|
|
- The frontend is available at [http://localhost:3000](http://localhost:3000) with the default credentials:
|
|||
|
|
- username: meet
|
|||
|
|
- password: meet
|
|||
|
|
- The Django backend is available at [http://localhost:8071](http://localhost:8071)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Developing
|
|||
|
|
|
|||
|
|
- To **stop** the application:
|
|||
|
|
```shellscript
|
|||
|
|
$ make stop
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- To **restart** the application:
|
|||
|
|
```shellscript
|
|||
|
|
$ make run
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- For **frontend development**, start all backend services without the frontend container:
|
|||
|
|
```shellscript
|
|||
|
|
$ make run-backend
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Then:
|
|||
|
|
```shellscript
|
|||
|
|
$ make frontend-development-install
|
|||
|
|
$ make run-frontend-development
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Which is equivalent to these direct npm commands:
|
|||
|
|
```shellscript
|
|||
|
|
$ cd src/frontend
|
|||
|
|
$ npm i
|
|||
|
|
$ npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Adding Content
|
|||
|
|
|
|||
|
|
You can bootstrap demo data with a single command:
|
|||
|
|
```shellscript
|
|||
|
|
$ make demo
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Option 2: Developing with Kubernetes
|
|||
|
|
|
|||
|
|
Visio is deployed across staging, preprod, and production environments using **Kubernetes (K8s)**. Reproducing the environment locally is crucial for developing new features or debugging.
|
|||
|
|
|
|||
|
|
This is facilitated by [Tilt](https://tilt.dev/), which provides Kubernetes-like development for local environments, enabling smart rebuilds and live updates.
|
|||
|
|
|
|||
|
|
### Getting Started
|
|||
|
|
|
|||
|
|
Make sure you have the following installed:
|
|||
|
|
- kubectl
|
|||
|
|
- helm
|
|||
|
|
- helmfile
|
|||
|
|
- tilt
|
|||
|
|
|
|||
|
|
To build and start the Kubernetes cluster using **Kind**:
|
|||
|
|
```shellscript
|
|||
|
|
$ make build-k8s-cluster
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Once the Kubernetes cluster is ready, start the application stack locally:
|
|||
|
|
```shellscript
|
|||
|
|
$ make start-tilt-keycloak
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Monitor Tilt’s progress at [http://localhost:10350/](http://localhost:10350/). After Tilt actions finish, you can access the app at [https://visio.127.0.0.1.nip.io/](https://visio.127.0.0.1.nip.io/).
|