Modern user interface for – CURRENTLY INACTIVE
Go to file
heyarne 15dcdaab1b
Greenkeeper/shadow cljs 2.9.10 (#107)
* chore(package): update shadow-cljs to version 2.9.10

* chore(package): update lockfile package-lock.json

Co-authored-by: greenkeeper[bot] <23040076+greenkeeper[bot]>
2021-12-23 10:45:49 +01:00
.circleci Fix deploy branch filter on CircleCI 2019-12-14 11:50:05 +01:00
docs Improve docs and simplify dev script 2018-08-22 12:33:38 +02:00
src Add dummy breadcrumb when library does not have params set (fixes #71) (#72) 2019-12-14 12:17:36 +01:00
test/cljs Move artists into library (#68) 2019-12-08 00:56:45 +01:00
.gitignore Restructure app init; fixes #5 and #11 2018-07-09 21:16:28 +02:00
.joker Add a real playlist (#20) 2018-08-20 16:34:52 +02:00
LICENSE.txt Add license 2018-11-26 09:13:15 +01:00 Remove chromium dependency for tests (#73) 2019-12-21 11:43:38 +01:00
karma.conf.js Remove chromium dependency for tests (#73) 2019-12-21 11:43:38 +01:00
package-lock.json Bump jszip from 3.2.2 to 3.7.1 (#106) 2021-12-23 10:44:06 +01:00
package.json Greenkeeper/shadow cljs 2.9.10 (#100) 2021-05-03 18:14:06 +02:00
postcss.config.js Improvements to currently playing queue (#48) 2019-03-12 15:22:13 +01:00
shadow-cljs.edn Move artists into library (#68) 2019-12-08 00:56:45 +01:00

Airsonic Web Client CircleCI Greenkeeper badge

This repository contains an alternative web frontend for airsonic. The goal is to eventually be able to fully replace the current web interface.

Implemented So Far

  • Login with persisting credentials
  • Browse your library by newest / most recently played / starred
  • Browse artists alphabetically
  • A currently playing queue with next, previous, repeat and shuffle
  • Information about the current track with the ability to seek

How Do I Host This Myself?

There are two options:

  • You build it yourself by cloning the repository and running npm run build
  • You grab a pre-built version from the gh-pages branch (just click the download button)

The files you receive either way should be identical. There's an article about setting up nginx in the repository wiki.

If you have any questions please ask them in the airsonic matrix channel.


The project is written in ClojureScript and uses re-frame for structure and peace of mind. The build tool is shadow-cljs, which offers nice editor integration and interoparibility with the whole JavaScript ecosystem. If you haven't worked with re-frame: I highly recommend it. Good resources are the project's docs and a post about its building blocks.

To build the project make sure you have Node.js (v6.0.0), npm and Java 8 installed in your system.

# after cloning the project, first install all dependencies
$ npm install

# start a continuous build with hot-code-reloading and continuous testing
# first build takes a while. open http://localhost:8080
$ npm run dev

All other build tasks are defined in the package.json (more below).

Editor Integration

Integrating shadow-cljs with your editor helps tremendously with development. After having run npm run dev as described above you can connect to the REPL and get features like in-editor code execution and code completion / documentation lookup. For further information see this part of the shadow-cljs user guide. Recommended editors and plugins are Calva for VSCode and CIDER for Emacs (comes with Spacemacs). Make sure to open localhost:8080 in the browser after starting the dev:cljs task to execute ClojureScript code in a live REPL.


re-frame-10x is a debugger that is bundled with the app in development mode. Once you have the build running, hit Ctrl + h and the re-frame-10x window will show up:

re-frame-10x in action

It provides you with tools to inspect the state of the application, undo and replay events, debug performance issues and more.


This project uses karma for tests. There is a check inside karma.conf.js to see whether Firefox is installed (via which firefox which probably breaks on Windows 🤷); if that command doesn't fail it will be used as the test runner. Otherwise Chrome will be used. If you have Chromium installed, make sure to set the CHROME_BIN environment variable to point to Chromium.

# run tests once
$ npm test

Note: If you want nice console output in your tests, make sure to (enable-console-print!). You can call println afterwards like you're used to.


# build and optimize the code once for production
$ npm run build

# publishes everything via gh-pages
$ npm run deploy

There is continuous deployment set up on circleci that builds and deploys to gh-pages after a commit to the master branch.

Note: If you have a continuous build running and run npm run build or npm run deploy, it will delete the compiled tests, causing the continuous tests to not run anymore. This can be fixed by running npm test again.

All build artifacts land in /public. Don't change anything in there as changes will be overwritten.