diff --git a/docs/clients/web-interface.md b/docs/clients/web-interface.md index ed8f14e4..91c42c97 100644 --- a/docs/clients/web-interface.md +++ b/docs/clients/web-interface.md @@ -1,4 +1,4 @@ -# OwnTone web interface +# Web Interface Mobile friendly player web interface for [OwnTone](http://owntone.github.io/owntone-server/) build with [Vue.js](https://vuejs.org), [Bulma](http://bulma.io). @@ -19,7 +19,7 @@ with remotes, select speakers, authenticate with Spotify, etc. ![Music albums](../assets/images/screenshot-music-albums.png){: class="zoom" } ![Music albums options](../assets/images/screenshot-music-albums-options.png){: class="zoom" } ![Music album](../assets/images/screenshot-music-album.png){: class="zoom" } -![Spotiy](../assets/images/screenshot-music-spotify.png){: class="zoom" } +![Spotify](../assets/images/screenshot-music-spotify.png){: class="zoom" } ![Audiobooks authors](../assets/images/screenshot-audiobooks-authors.png){: class="zoom" } ![Audiobooks](../assets/images/screenshot-audiobooks-books.png){: class="zoom" } ![Podcasts](../assets/images/screenshot-podcasts.png){: class="zoom" } @@ -29,25 +29,23 @@ with remotes, select speakers, authenticate with Spotify, etc. ![Menu](../assets/images/screenshot-menu.png){: class="zoom" } ![Outputs](../assets/images/screenshot-outputs.png){: class="zoom" } - ## Usage You can find OwnTone's web interface at [http://owntone.local:3689](http://owntone.local:3689) or alternatively at http://SERVER_ADDRESS:3689. - ## Build Setup The source is located in the `web-src` folder. -``` +```bash cd web-src ``` The web interface is built with [Vite](https://vitejs.dev/), makes use of Prettier for code formatting and ESLint for code linting (the project was set up following the guide [ESLint and Prettier with Vite and Vue.js 3](https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/) -``` bash +```bash # install dependencies npm install @@ -57,7 +55,7 @@ npm run serve # Serve with hot reload at localhost:3000 # (with remote OwnTone server reachable under owntone.local:3689) -VITE_OWNTONE_URL=http://owntone.local:3689 npm run serve +export VITE_OWNTONE_URL=http://owntone.local:3689 npm run serve # Build for production with minification (will update web interface # in "../htdocs") @@ -71,7 +69,7 @@ npm run lint ``` After running `npm run serve` the web interface is reachable at [localhost:3000](http://localhost:3000). -By default it expects **owntone** to be running at [localhost:3689](http://localhost:3689) and proxies all +By default it expects **OwnTone** to be running at [localhost:3689](http://localhost:3689) and proxies all JSON API calls to this location. If the server is running at a different location you have to set the env variable `VITE_OWNTONE_URL`.