Web Interface¶
The web interface is a mobile-friendly music player and browser for OwnTone.
You can reach it at http://owntone.local:3689 or depending on the OwnTone installation at http://<server-address>:<port>.
This interface becomes useful when you need to control playback, trigger manual library rescans, pair with remotes, select speakers, grant access to Spotify, and for many other operations.
Screenshots¶
Below you have a selection of screenshots that shows different part of the interface.
Usage¶
The web interface is usually reachable at http://owntone.local:3689. But depending on the setup of OwnTone you might need to adjust the server name and port of the server accordingly http://<server-name>:<port>.
Building and Serving¶
The web interface is built with Vite and Bulma.
Its source code is located in the web-src folder and therefore all npm commands must be run under this folder.
To switch to this folder, run the command hereafter.
Dependencies Installation¶
First of all, the dependencies to libraries must be installed with the command below.
Once the libraries installed, you can either build, format, and lint the source code, or serve the web interface locally.
Source Code Building¶
The following command builds the web interface for production with minification and stores it under the folder ../htdocs.
Source Code Formatting¶
The source code follows certain formatting conventions for maintainability and readability. To ensure that the source code follows these conventions, Prettier is used.
The command below applies formatting conventions to the source code based on a preset configuration. Note that a additional configuration is made in the file .prettierrc.json.
Source Code Linting¶
In order to flag programming errors, bugs, stylistic errors and suspicious constructs in the source code, ESLint is used.
Note that ESLint has been configured following this guide.
The following command lints the source code and fixes all automatically fixable errors.
Serving¶
In order to serve locally the web interface, the following command can be run.
After running npm run serve the web interface is reachable at localhost:3000.
By default the above command expects the OwnTone server to be running at localhost:3689 and proxies API calls to this location.
If the server is running at a different location you have to set the environment variable VITE_OWNTONE_URL, like in the example below.