Dashy helps you organize your self-hosted services, by making them all accessible from a single place
User Showcase | Live Demo | Getting Started | Documentation | GitHub
- **Getting Started** - [๐ Features](#features-) - [โกDemo](#demo-) - [๐ Getting Started](#getting-started-) - [๐ง Configuring](#configuring-) - **Feature Overview** - [๐จ Theming](#theming-) - [๐งธ Icons](#icons-) - [๐ฆ Status Indicators](#status-indicators-) - [๐ Authentication](#authentication-) - [๐ฑ๏ธ Opening Methods](#opening-methods-%EF%B8%8F) - [๐ Alternate Views](#alternate-views-) - [๐ Searching and Shortcuts](#searching-and-shortcuts-) - [โ๏ธ Config Editor](#config-editor-%EF%B8%8F) - [โ Cloud Backup & Sync](#cloud-backup--sync-) - [๐ Language Switching](#language-switching-) - [๐ณ Dashboard Info](#setting-dashboard-info-) - **Community** - [๐โโ๏ธ Getting Help](#getting-help-%EF%B8%8F) - [๐ Raising Issues](#raising-issues-) - [๐ Supporting Dashy](#supporting-dashy-) - [๐ Credits](#credits-) - [๐งฑ Developing](#developing-) - [๐ Documentation](#documentation-) - [๐ฃ๏ธ Roadmap](#roadmap-) - [๐ Alternatives](#alternatives-) - [๐ License](#license-)
#### User Showcase Are using Dashy? Want to share your dashboard here too - [Submit your Screenshots to the Showcase](./docs/showcase.md#submitting-your-dashboard)! ![Screenshots](https://i.ibb.co/r5T3MwM/dashy-screenshots.png) **[โฌ๏ธ Back to Top](#dashy)** --- ## Getting Started ๐ซ > For full setup instructions, see: [**Deployment**](./docs/deployment.md) ### Deploying from Docker Hub ๐ณ You will need [Docker](https://docs.docker.com/get-docker/) installed on your system ``` docker run -p 8080:80 lissy93/dashy ``` Or ```docker docker run -d \ -p 4000:80 \ -v /root/my-local-conf.yml:/app/public/conf.yml \ --name my-dashboard \ --restart=always \ lissy93/dashy:latest ``` [![Dashy on Docker Hub](https://dockeri.co/image/lissy93/dashy)](https://hub.docker.com/r/lissy93/dashy) If you prefer to use Docker Compose, [here is an example](./docs/deployment.md#using-docker-compose). Dashy is also available through GHCR, run: `docker pull ghcr.io/lissy93/dashy`. To use Dashy on an system other than `amd64`, then use [one of these tags](https://hub.docker.com/r/lissy93/dashy/tags). There are containers for `arm32-7`, `arm64-v8` and a multi-architecture image. The image defaults to `:latest`, but you can instead specify a specific version, e.g. `docker pull lissy93/dashy:release-1.5.0` > Once you've got Dashy running, you can take a look at [App Management Docs](./docs/management.md), for info on using health checks, provisioning assets, configuring web servers, securing your app, logs, performance and more. ### Deploying from Source ๐ You will need [git](https://git-scm.com/downloads), the latest or LTS version of [Node.js](https://nodejs.org/) and (optionally) [Yarn](https://yarnpkg.com/) installed on your system. - Get Code: `git clone https://github.com/Lissy93/dashy.git` and `cd dashy` - Configuration: Fill in you're settings in `./public/conf.yml` - Install dependencies: `yarn` - Build: `yarn build` - Run: `yarn start` > See docs [Full list of Dashy's commands](./docs/management.md#basic-commands) ### Deploy to the Cloud โ๏ธ Dashy supports 1-Click deployments on several popular cloud platforms. To spin up a new instance, just click a link below: - [ Deploy to Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/dashy) - [ Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/Lissy93/dashy) - [ Deploy to Vercel](https://vercel.com/new/project?template=https://github.com/lissy93/dashy) - [ Deploy to Render](https://render.com/deploy?repo=https://github.com/lissy93/dashy/tree/deploy_render) - [ Deploy to GCP](https://deploy.cloud.run/?git_repo=https://github.com/lissy93/dashy.git) - [ Deploy to PWD](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml) > For more 1-click cloud deployments, see [Cloud Deployment](./docs/deployment.md#deploy-to-cloud-service) **[โฌ๏ธ Back to Top](#dashy)** --- ## Configuring ๐ง > For full configuration documentation, see: [**Configuring**](./docs/configuring.md) All of Dashy's configuration is specified in a single [YAML](https://yaml.org/) file, located at `./public/conf.yml`. You can find a complete list of available options in th [Configuring Docs](/docs/configuring.md). If you're using Docker, you'll probably want to pass this file in as a Docker volume (e.g. `-v /root/my-local-conf.yml:/app/public/conf.yml`). The config can also be edited directly through the UI, with changes written to your conf.yml file. After making any modifications the app needs to be rebuilt, which will happen automatically or can be trigger with `yarn build` or directly through the UI. You can check that your config is valid and matches Dashy's [schema](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.json), by running: `yarn validate-config`. Finally, you may find these [example config](https://gist.github.com/Lissy93/000f712a5ce98f212817d20bc16bab10) helpful for getting you started. **[โฌ๏ธ Back to Top](#dashy)** --- ## Theming ๐จ > For full theming documentation, see: [**Theming**](./docs/theming.md) Dashy comes with a number of built-in themes, but it's also easy to make you're own. You can either use the color editor, or you're own custom CSS. All colors, and most other CSS properties are specified using CSS variables, which are [documented here](./docs/theming.md#css-variables), so customizing the look and feel of Dashy very easy. Learn more about adding your own theme in the [docs](https://github.com/Lissy93/dashy/blob/master/docs/theming.md#adding-your-own-theme). **[โฌ๏ธ Back to Top](#dashy)** --- ## Icons ๐งธ > For full iconography documentation, see: [**Icons**](./docs/icons.md) Both sections and items can have an icon associated with them, and defined under the `icon` attribute. There are many options for icons, including Font Awesome support, automatic fetching from favicon, programmatically generated icons and direct local or remote URLs.
- **Favicon**: Set `icon: favicon` to fetch a services icon automatically from the URL of the corresponding application - **Font-Awesome**: To use any font-awesome icon, specify the category, followed by the icon name, e.g. `fas fa-rocket` or `fab fa-monero`. You can also use Pro icons if you have a license key, just set it under `appConfig.fontAwesomeKey` - **Generative**: Setting `icon: generative`, will generate a unique for a given service, based on it's URL or IP - **Emoji**: Use an emoji as a tile icon, by putting the emoji's code as the icon attribute. Emojis can be specified either as emojis (`๐`), unicode (`'U+1F680'`) or shortcode (`':rocket:'`). - **URL**: You can also pass in a URL to an icon asset, hosted either locally or using any CDN service. E.g. `icon: https://i.ibb.co/710B3Yc/space-invader-x256.png`. - **Local Image**: To use a local image, store it in `./public/item-icons/` (or create a volume in Docker: `-v /local/image/directory:/app/public/item-icons/`) , and reference it by name and extension - e.g. set `icon: image.png` to use `./public/item-icon/image.png`. You can also use sub-folders here. - **Material Design Icons**: You can also use any icon from [materialdesignicons.com](https://dev.materialdesignicons.com/icons) by setting the icon to `mdi-[icon-name]`. **[โฌ๏ธ Back to Top](#dashy)** --- ## Status Indicators ๐ฆ > For full monitoring documentation, see: [**Status Indicators**](./docs/status-indicators.md) Dashy has an optional feature that can display a small icon next to each of your running services, indicating it's current status. This is useful if you are using Dashy as your homelab's start page, as it gives you an overview of the health of each of your running services. Hovering over the indicator will show additional information, including average response time and an error message for services which are down. By default, this feature is off, but you can enable it globally by setting `appConfig.statusCheck: true`, or enable/ disable it for an individual item, with `item[n].statusCheck`. You can also specify an time interval in seconds under `appConfig.statusCheckInterval`, between checks, if this value is `0`, then status is only checked on initial page load, which is the default behavior. Status checks use the `url` attribute, but to call a different endpoint instead, you can set `statusCheckUrl`. Custom headers can also be specified using `statusCheckHeaders`.
**[โฌ๏ธ Back to Top](#dashy)** --- ## Authentication ๐ > For full authentication documentation, see: [**Authentication**](./docs/authentication.md) Dashy now has full support for [Keycloak](https://www.keycloak.org/)! There is also a simple login feature for basic access control, which doesn't require any additional setup. To enable this feature, add an `auth` attribute under `appConfig`, containing an array of `users`, each with a username, SHA-256 hashed password and optional user type. ```yaml appConfig: auth: users: - user: alicia hash: 4D1E58C90B3B94BCAD9848ECCACD6D2A8C9FBC5CA913304BBA5CDEAB36FEEFA3 type: admin ``` **Guest Access**: By default, when authentication is configured no user can access your dashboard without first logging in. If you would like to allow for read-only access by unauthenticated users, then you can enable guest mode, by setting `appConfig.auth.enableGuestAccess: true`. **Note**: Using the above method involves access control being handled on the frontend, and therefore in security-critical situations, it is recommended to use an alternate method for authentication. Keycloak is [natively supported](docs/authentication.md#keycloak), but you could also use [Authelia](https://www.authelia.com/), a VPN or web server and firewall rules. Instructions for all of these can be found [in the docs](docs/authentication.md#alternative-authentication-methods).
**Granular Controls**: With basic login, it is also possible to control which sections are visible to which users. Under the `displayData` property of a section, you can pass an array of usernames to one of the following attributes: - `hideForUsers` - Section will be visible to all users, except for those specified in this list - `showForUsers` - Section will be hidden from all users, except for those specified in this list - `hideForGuests` - Section will be visible for all logged in users, but not for guests (if guest access is enabled) **[โฌ๏ธ Back to Top](#dashy)** --- ## Opening Methods ๐ฑ๏ธ > For full documentation on views and opening methods, see: [**Alternate Views**](./docs/alternate-views.md) One of the primary purposes of Dashy is to make launching commonly used apps and services as quick as possible. To aid in this, there are several different options on how items can be opened. You can configure your preference by setting the `target` property of any item, to one of the following values: - `sametab` - The app will be launched in the current tab - `newtab` - The app will be launched in a new tab - `modal` - Launch app in a resizable/ movable popup modal on the current page - `workspace` - Changes to Workspace view, and launches app Even if the target is not set (or is set to `sametab`), you can still launch any given app in an alternative method: Alt + Click will open the modal, and Ctrl + Click will open in a new tab. You can also right-click on any item to see all options (as seen in the screenshot below). This custom context menu can be disabled by setting `appConfig.disableContextMenu: true`. In the workspace view, you can keep previously opened websites/ apps open in the background, by setting `appConfig.enableMultiTasking: true`. This comes at the cost of performance, but does mean that your session with each app is preserved, enabling you to quickly switch between your apps.
The modal and workspace views work by rendering the target application in an iframe. For this to work, the HTTP response header [`X-Frame-Options`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) for a given application needs to be set to `ALLOW`. If you are getting a `Refused to Connect` error then this header is set to `DENY` (or `SAMEORIGIN` and it's on a different host). Here are [instructions on how to do this](./docs/troubleshooting.md#refused-to-connect-in-modal-or-workspace-view) with common web servers. --- ## Alternate Views ๐ As well as the default homepage, there is also: - A minimal view, useful for use as a browser start page - A workspace view, useful for visiting many apps simultaneously You can change the view from the UI, using the switch icon in the top-right corner, or select a default view in the config, under `appConfig.startingView` attribute (can be either `default`, `minimal` or `workspace`). Clicking the page title on any view will take you back to your default starting view.
Example of Workspace View
Example of Minimal View
**[โฌ๏ธ Back to Top](#dashy)** --- ## Cloud Backup & Sync โ > For full backup documentation, see: [**Cloud Backup & Sync**](./docs/backup-restore.md) Dashy has an **optional** built-in feature for securely backing up your config to a hosted cloud service, and then restoring it on another instance. This feature is totally optional, and if you do not enable it, then Dashy will not make any external network requests. This is useful not only for backing up your configuration off-site, but it also enables Dashy to be used without having write a YAML config file, and makes it possible to use a public hosted instance, without the need to self-host. All data is encrypted before being sent to the backend. In Dashy, this is done in [`CloudBackup.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/CloudBackup.js), using [crypto.js](https://github.com/brix/crypto-js)'s AES method, using the users chosen password as the key. The data is then sent to a [Cloudflare worker](https://developers.cloudflare.com/workers/learning/how-workers-works) (a platform for running serverless functions), and stored in a [KV](https://developers.cloudflare.com/workers/learning/how-kv-works) data store.
**[โฌ๏ธ Back to Top](#dashy)** --- ## Language Switching ๐ > For full internationalization documentation, see: [**Multi-Language Support**](./docs/multi-language-support.md) Dashy has the ability to support multiple languages and locales. When available, you're language should be automatically detected and applied on load, based on your browser or systems settings. But you can also select a language through the UI, under Config --> Switch Language, or set `appConfig.language` to your language (specified as a 2-digit [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)). #### Supported Languages - ๐ฌ๐ง **English**: `en` - ๐ฉ๐ช **German**: `de` - Contributed by **[@Niklashere](https://github.com/Niklashere)** - ๐ณ๐ฑ **Dutch**: `nl` - Contributed by **[@evroon](https://github.com/evroon)** - ๐ฒ๐ซ **French**: `fr` - Contributed by **[@EVOTk](https://github.com/EVOTk)** - ๐ธ๐ฎ **Slovenian**: `sl` - Contributed by **[@UrekD](https://github.com/UrekD)** #### Add your Language I would love for Dashy to be available to everyone, without language being a barrier to entry for non-native English speakers. If you have a few minutes to sapir, you're help with translating it would be very much appreciated. It's quite a quick task, all text is in [a single JSON file](https://github.com/Lissy93/dashy/tree/master/src/assets/locales), and you don't have to translate it all. For more info, see the [Adding a New Language Docs](./docs/multi-language-support.md#adding-a-new-language), and feel free to reach out if you need any support. **[โฌ๏ธ Back to Top](#dashy)** --- ## Setting Dashboard Info ๐ณ Page settings are defined under [`pageInfo`](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md#pageinfo). Here you can set things like title, sub-title, navigation links, footer text, etc. For example: ```yaml pageInfo: title: Home Lab description: Dashy navLinks: - title: Home path: / - title: Server Monitoring path: https://server-start.local - title: Start Page path: https://start-page.local footerText: 'My Awesome Dashboard. Built with Dashy' ``` **[โฌ๏ธ Back to Top](#dashy)** --- ## Getting Help ๐โโ๏ธ > For general discussions, check out the **[Discussions Board](https://github.com/Lissy93/dashy/discussions)** If you're having trouble getting things up and running, feel free to ask a question. The best way to do so is in the [discussion](https://github.com/Lissy93/dashy/discussions), or if you think you think the issue is on Dashy's side, you can [raise a ticket](https://github.com/Lissy93/dashy/issues/new/choose). It's best to check the [docs](./docs) and [previous questions](https://github.com/Lissy93/dashy/issues?q=label%3A%22%F0%9F%A4%B7%E2%80%8D%E2%99%82%EF%B8%8F+Question%22+) first, as you'll likely find the solution there. **[โฌ๏ธ Back to Top](#dashy)** ## Raising Issues ๐ Found a bug, or something that isn't working as you'd expect? Please raise it as an issue so that it can be resolved. Feature requests are also welcome. Similarlty, feedback is very useful, as it helps me know what areas of Dashy need some improvement. - [Raise a Bug ๐](https://github.com/Lissy93/dashy/issues/new?assignees=lissy93&labels=%F0%9F%90%9B+Bug&template=bug.yml&title=%5BBUG%5D+%3Ctitle%3E) - [Submit a Feature Request ๐ฆ](https://github.com/Lissy93/dashy/issues/new?template=feature-request.yml) - [Share Feedback ๐](https://github.com/Lissy93/dashy/issues/new?assignees=&labels=%F0%9F%8C%88+Feedback&template=share-feedback.md&title=%5BFEEDBACK%5D) **Issue Status** [![Resolution Time](http://isitmaintained.com/badge/resolution/lissy93/dashy.svg) ![Open Issues](http://isitmaintained.com/badge/open/lissy93/dashy.svg) ![Closed Issues](https://badgen.net/github/closed-issues/lissy93/dashy)](https://isitmaintained.com/project/lissy93/dashy) [![GitHub Discussions](https://img.shields.io/github/discussions/lissy93/dashy) ](https://github.com/Lissy93/dashy/discussions) **[โฌ๏ธ Back to Top](#dashy)** ## Supporting Dashy ๐ > For full details, and other ways you can help out, see: [**Contributing**](./docs/contributing.md) If you're using Dashy, and would like to help support it's development, then that would be awesome! Contributions of any type, however small are always very much appreciated, and you will be appropriately credited for your effort. Several areas that we need a bit of help with at the moment are: - Translating - Help make Dashy available to non-native English speakers by [adding youre language](./docs/multi-language-support.md#adding-a-new-language) - Donate a small amount, by [Sponsoring @Lissy93 on GitHub](https://github.com/sponsors/Lissy93) and receive some extra perks! - Complete a [short survey](https://n9fy6xak9yd.typeform.com/to/gl0L68ou), to have your say about future features - Share your dashboard in the [Showcase](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md#dashy-showcase-), to provide inspiration for others - Join the [discussion](https://github.com/Lissy93/dashy/discussions), help answer other users questions, suggest features, share tips and ask questions - Spread the word, by sharing Dashy or a screenshot of your dashboard, to help new users discover it - Submit a PR, to add a new feature, fix a bug, update the docs, add a theme or something else - Star Dashy on GitHub/ DockerHub or leave an upvote / review on [these platforms](https://github.com/Lissy93/dashy/blob/master/docs/contributing.md#star-upvote-or-leave-a-review) [![Sponsor Lissy93 on GitHub](./docs/assets/sponsor-button.svg)](https://github.com/sponsors/Lissy93) **[โฌ๏ธ Back to Top](#dashy)** ## Credits ๐ > For a full list of credits, and attributions to packages used within Dashy, see: [**Credits**](./docs/credits.md) Thank you so much to everyone who has helped with Dashy so far, every contribution is very much appreciated. #### Sponsors Huge thanks to the sponsors helping to support Dashy's development!
Robert Ernst |
Carlos Rufo |