Self–hosting

Introduction

While it's very comfortable to use the user interface at https://heyarne.github.io/airsonic-ui, you may not want to rely on external services to access your beloved music collection. This guide covers the steps required to host this interface on your own server. It assumes you have a basic knowledge of working with the unix command line and is potentially sloppy. If you have any questions, feel free to open an issue!

Prerequisites

We assume you have already set up a proxy to access your airsonic instance. If you have not, please check out the documentation for that.

Setup

The following lines are meant to be run on your server in a bash shell; lines starting with # are comments, lines starting with $ are followed by the commands you should execute. Lines which start with neither a # nor a $ represent output of the previous command, even though some output might have been omitted.

# first, create a folder that the static files will get served from
# download the latest release and extract it
$ wget https://github.com/heyarne/airsonic-ui/archive/gh-pages.zip
$ unzip gh-pages
$ ls airsonic-ui-gh-pages
android-chrome-192x192.png  favicon-32x32.png   mstile-150x150.png
android-chrome-512x512.png  favicon.ico         mstile-310x150.png
app/                        fonts/              mstile-310x310.png
apple-touch-icon.png        img/                mstile-70x70.png
browserconfig.xml           index.html          safari-pinned-tab.svg
favicon-16x16.png           mstile-144x144.png  site.webmanifest
# Set up access rights and move the assets to the right place
$ chown -R :www-data airsonic-ui-gh-pages
$ mv airsonic-ui-gh-pages /var/www/airsonic-ui

Now that we have our files in place, configure your proxy (nginx in this case) to serve the directory /var/www/airsonic-ui. In your proxy config, you will have a location block like location /airsonic or something similar, depending on the exact location you serve airsonic from. You can configure the proxy to serve the new UI at /bling-bling by inserting this block before the other block:

location /bling-bling {
    alias /var/www/airsonic-ui;
}

My complete config now looks like this:

server {
    # Enable HTTPS
    listen       443 default ssl;
    server_name  your.server.url;
    ssl_certificate      /path/to/fullchain.pem;
    ssl_certificate_key  /path/to/privkey.pem;

    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml application/javascript application/json application/xml;

    # fancy new ui
    location /bling-bling {
        alias /var/www/airsonic-ui;
    }

    # Proxy to the Airsonic server
    location / {
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Host  $http_host;
        proxy_set_header Host              $http_host;
        proxy_max_temp_file_size           0;
        proxy_pass                         http://127.0.0.1:8080;
        proxy_redirect                     http:// https://;
    }
}

Now test the config and reload nginx to use it:

$ nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
$ service nginx reload

Done! Have fun with your new user interface.