# OwnTracks UI
> Web interface for OwnTracks
[](https://hub.docker.com/r/owntracks/frontend)
## Introduction
This is a web interface for [OwnTracks](https://github.com/owntracks/recorder) built as
a Vue.js single page application. The recorder itself already ships with some basic web
pages, this is a more advanced interface with more functionality, all in one place.
## Installation
### Manually
**For development:**
- Run `yarn install` to install dependencies
- Run `yarn serve` to compile for development and start the hot-reload server
- Run `yarn lint` to lint and fix files
You can use the [`corsProxy.js`](scripts/corsProxy.js) script to use your production
instance of OwnTracks for development without making changes to its CORS-Headers:
```console
$ yarn cors-proxy
```
If you have [basic authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme) enabled:
```console
$ env OT_BASIC_AUTH_USERNAME=username OT_BASIC_AUTH_PASSWORD='P@$$w0rd' yarn cors-proxy
```
The default host and port it binds to is `0.0.0.0:8888`. Change using the `OT_PROXY_HOST`
and `OT_PROXY_PORT` environment variables.
Finally update `api.baseUrl` in your config to `"http://0.0.0.0:8888/https://owntracks.example.com"`.
**To deploy:**
- Run `yarn install --production` to install dependencies
- Run `yarn build` to compile and minify for production
- Copy the content of the `dist/` directory to your webroot
The API is expected to be reachable under the same domain as the web interface.
### Docker
You can launch directly via Docker run like this:
```console
$ docker run -d -p 80:80 -e SERVER_HOST=otrecorder-host -e SERVER_PORT=otrecorder-port owntracks/frontend
```
Or you can use `docker-compose` (if you also run the OwnTracks Recorder with the default
compose config, and the service is named `otrecorder`):
```yaml
version: '3'
services:
owntracks-ui:
image: owntracks/frontend
ports:
- 80:80
environment:
- SERVER_HOST=otrecorder
- SERVER_PORT=8083
restart: unless-stopped
```
## Configuration
Copy [`public/config/config.default.js`](public/config/config.default.js) to
`public/config/config.js` and make changes as you wish.
See [`docs/config.md`](docs/config.md) for all available options.
## Features
- Last known (i.e. live) locations:
- Accuracy visualization (circle)
- Device friendly name and icon
- Detailed information (if available): time, latitude, longitude, height, battery and
speed
- Location history (data points, line or both)
- Location heatmap
- Quickly fit all shown objects on the map into view
- Display data in a specific date range
- Filter by user and device
- Highly customisable
## Screenshots
_Click to enlarge._
## Contributing
Please feel free to open an issue and discuss your ideas and report bugs. If you think
you can help out with something, open a PR!