Create a sleek looking startpage or new tab page using SUI

A startpage, such as the one provided by SUI, can help you navigate all your apps with ease. This guide will show you how to install and configure it.

Disclosure: This post contains affiliate links. If you click through and make a purchase, I’ll earn a commission, at no additional cost to you. Read my full disclosure here.
A notebook representing a start page

A startpage, such as the one provided by the application SUI, can help you navigate all your apps with ease. Once you start installing more and more self-hosted applications on your Unraid application server, knowing where they are all located can become quite a challenge. This is especially true if you keep everything local and don’t use unique subdomains for every application.

A startpage created with SUI

SUI allows you to create a list of applications you might be self-hosting (though they can be any web app) and a separate list of bookmarks to your favourite websites. I have been testing this application for the past week or so, and this guide will tell you how to set it up on Unraid and configure it using yet another self-hosted application.

Installing SUI on Unraid

It will come as no surprise to you that SUI is installed as a Docker container, of which a template named SUIStartpage is available in the Community Applications under CorneliousJD’s repository. Unless you want to change the port from 8489 to something else, there are no adjustments needed to be made to the template. Just click the installation button, and you are ready to go.

Once installed, you can access the page SUI has created using the browser of your choice by navigating to http://YOU-UNRAID-IP:8489. There is a menu button located in the bottom-left corner, though this will only allow you to choose the theme. The setup of the SUI startpage is done in three JSON files.

Configuring SUI using code-server

Whenever you need to edit a file one of your Unraid server’s Docker containers needs, I recommend using the code-server application. This application allows you to run Visual Studio Code, possibly the best source-code editor around, inside a browser and it won’t have any issues with permissions.

As with the SUI application, code-server can be found in the Community Applications and doesn’t need any edits to the provided template. The only exception is if you are planning on accessing it from the internet. In that case, you will definitely want to set a password.

Editing SUI’s apps.json file

In the first file, found under /mnt/user/appdata/suistartpage/apps.json, you can define what applications you want shown on your SUI startpage. Applications take up more space and have an icon next to their name, making this file perfect to store all of your self-hosted applications.

Four applications displayed on the SUI startpage

The contents of this file are easily edited. You add the name and URL, or domain and port, of your application and then choose an icon for the application. SUI supports Material Design Icons, and all you need to enter is the icon’s name.

{
    "apps" : [
        {"name":"Code","url":"https://dev.example.com","icon":"code-tags"},
        {"name":"NginxProxyManager","url":"http://npm.example.com","icon":"web"},
        {"name":"Sonarr","url":"https://sonarr.example.com","icon":"television"},
        {"name":"Sonarr","url":"https://radarr.example.com","icon":"movie"}
    ]
}

The good thing about using code-server for editing is that it will automatically recognize that this is a JSON file by its filename and will point out any errors. For example, it would highlight the comma, were you to place one after the final entry in the array.

Editing SUI’s links.json file

The bookmarks, which are stored in the file /mnt/user/appdata/suistartpage/links.json, are just as easy to edit as the applications. You first define a category, under which the following links will be grouped. Then you simply add one link at a time, providing a name and URL for each option.

{
            "bookmarks" : [
              {
                "category": "My sites",
                "links": [
                  {
                    "name": "Home Assistant Guide",
                    "url": "https://home-assistant-guide.com"
                  },
                  {
                    "name": "Unraid Guides",
                    "url": "http://unraid-guides.com"
                  }
                ]
              },
}

Editing SUI’s providers.json file

The final file, /mnt/user/appdata/suistartpage/providers.json, allows you to search specific websites using a prefix. You might not have noticed it, but at the top of the SUI startpage, there is a single line. As it turns out, that is not just a line but a text field which you can use to search google. Using prefixes, you can search pages directly, without having to first open them.

To add your own search provider, you will first need to figure out the exact URL for a search query. I found the appropriate URL for this website, simply by performing a search. As you can see from the URL in the image below, the correct search URL is https://unraid-guides-com/?s=, as it is with most WordPress-base websites.

A search URL to be used in SUI

To add Unraid Guides to my search providers I would simply amend the following line to the provider.json file:

{
    "providers" : [
        {"name":"Trakt","url":"https://trakt.tv/search?query=","prefix":"/t"},
        {"name":"Unraid Guides","url":"https://unraid-guides.com/?s=","prefix":"/ug"}
    ]
}

I can then search Unraid Guides without having to leave my SUI startpage by adding the prefix /ug to the search field.

A search provider being used in SUI

Changing the SUI page title

One last adjustment you might want to make is to adjust the page’s title from SUI to something else, for example Home. To do so, open the file /mnt/user/appdata/suistartpage/providers.json and edit the text between the <title> tag.

About Liam Alexander Colman

I first heard of Unraid through the same medium as many of us did: The Linus Tech Tips channel on YouTube. At the time, I was running TrueNAS (or FreeNAS as it was called back then) on my DIY NAS built using a dual-core Intel Pentium G4400 at its heart. I was convinced, I had chosen the better operating system. After all, it was free and open-source and had a large community behind it. One day, after once again facing the need to buy another three hard drives, I seriously started researching Unraid and its features. I bit the bullet and gave it a go, transferring my data on to external hard drives that I later shucked and added to the Unraid array. Since that day, I have not looked back once, and I am now an enthusiastic and experienced user of Unraid. You can find out more about Unraid Guides right here.

Leave a comment