Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update documentation (Development Environment section) #4082

Merged
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 40 additions & 22 deletions site/content/en/docs/contributing/development-environment.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@ linkTitle: 'Development environment'
weight: 2
description: 'Installing a development environment for different operating systems.'
---
### Setup the dependencies:

- Install necessary dependencies:

Ubuntu 18.04

```sh
sudo apt-get update && sudo apt-get --no-install-recommends install -y build-essential curl redis-server python3-dev python3-pip python3-venv python3-tk libldap2-dev libsasl2-dev pkg-config libavformat-dev libavcodec-dev libavdevice-dev libavutil-dev libswscale-dev libswresample-dev libavfilter-dev
sudo apt-get update && sudo apt-get --no-install-recommends install -y build-essential curl git redis-server python3-dev python3-pip python3-venv python3-tk libldap2-dev libsasl2-dev pkg-config libavformat-dev libavcodec-dev libavdevice-dev libavutil-dev libswscale-dev libswresample-dev libavfilter-dev
```

```sh
Expand All @@ -25,10 +26,20 @@ description: 'Installing a development environment for different operating syste
brew install git python pyenv redis curl openssl node
```

- Install Chrome

- Install FFmpeg libraries (libav\*) version 4.0 or higher.

- Install [Visual Studio Code](https://code.visualstudio.com/docs/setup/linux#_debian-and-ubuntu-based-distributions)
for development
- Install [VS Code](https://code.visualstudio.com/docs/setup/linux#_debian-and-ubuntu-based-distributions) and the following VS Code extensions:

- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
AmitN1212 marked this conversation as resolved.
Show resolved Hide resolved
- [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
- [vscode-remark-lint](https://marketplace.visualstudio.com/items?itemName=drewbourne.vscode-remark-lint)
- [licenser](https://marketplace.visualstudio.com/items?itemName=ymotongpoo.licenser)
- [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)


- Install CVAT on your local host:

Expand All @@ -52,17 +63,13 @@ description: 'Installing a development environment for different operating syste
- Create a super user for CVAT:

```sh
$ python manage.py createsuperuser
Username (leave blank to use 'django'): ***
Email address: ***
Password: ***
Password (again): ***
python manage.py createsuperuser
```

- Install npm packages for UI and start UI debug server (run the following command from CVAT root directory):
- Install npm packages for UI (run the following command from CVAT root directory):

```sh
npm ci && npm run start:cvat-ui
npm ci
```

> Note for Mac users
Expand All @@ -73,25 +80,36 @@ description: 'Installing a development environment for different operating syste
>
> Read this article [Node Sass does not yet support your current environment](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

- Open new terminal (Ctrl + Shift + T), run Visual Studio Code from the virtual environment
- Install [Docker Engine](https://docs.docker.com/engine/install/ubuntu/) and [Docker-Compose](https://docs.docker.com/compose/install/)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or docker-desktop for Mac & Windows

Copy link
Contributor Author

@AmitN1212 AmitN1212 Dec 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ActiveChooN , But below, in Note for windows users, it says to install WSL and then follow all the commands for Ubuntu... So why would we need to install Docker for Windows?
For Mac: Maybe it is better to change the link to this.


- Pull OpenPolicyAgent Docker-image (run from CVAT root dir):
```sh
source .env/bin/activate && code
sudo docker-compose -f docker-compose.yml -f docker-compose.dev.yml up cvat_opa
```

- Install following VS Code extensions:
### Run CVAT
- Start npm UI debug server (run the following command from CVAT root directory):
- If you want to run CVAT in localhost:
```sh
npm run start:cvat-ui
```
- If you want to access CVAT from outside of your host:
```sh
CVAT_UI_HOST='<YOUR_HOST_IP>' npm run start:cvat-ui
```
- Open a new terminal window and run VScode from the virtual environment (run the following command from CVAT root directory):

- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
- [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
- [vscode-remark-lint](https://marketplace.visualstudio.com/items?itemName=drewbourne.vscode-remark-lint)
- [licenser](https://marketplace.visualstudio.com/items?itemName=ymotongpoo.licenser)
- [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
```sh
source .env/bin/activate && code
```

- Inside VScode, Open CVAT root dir

- Reload Visual Studio Code from virtual environment
- Select `server: debug` configuration and run it (F5) to run REST server and its workers
- Make sure that ```Uncaught Exceptions``` option under breakpoints section is unchecked
- If you choose to run CVAT in localhost: Select `server: chrome` configuration and run it (F5) to open CVAT in Chrome
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is also ui.js: debug configuration with npm background task

Copy link
Contributor Author

@AmitN1212 AmitN1212 Dec 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is also ui.js: debug configuration with npm background task

@ActiveChooN , It does not work for me. Maybe I am trying to do something wrong.

- Alternative: If you changed CVAT_UI_HOST just enter ```<YOUR_HOST_IP>:3000``` in your browser.

- Select `server: debug` configuration and start it (F5) to run REST server and its workers

You have done! Now it is possible to insert breakpoints and debug server and client of the tool.

Expand Down