πŸš€ A dashboard for your homelab

Related tags

dashboard
Overview

Dashy

Dashy helps you organize your self-hosted services, by making them all accessible from a single place

Features 🌈

  • Instant search by name, domain and tags - just start typing
  • Full keyboard shortcuts for navigation, searching and launching
  • Multiple color themes, with easy method for adding more
  • Customizable layout options, and item sizes
  • Quickly preview a website, by holding down the Alt key while clicking, to open it in a resizable pop-up modal
  • Many options for icons, including full Font-Awesome support and the ability to auto-fetch icon from URLs favicon
  • Additional info for each item visible on hover (including opening method icon and description as a tooltip)
  • Option for full-screen background image, custom nav-bar links, and custom footer text
  • User settings stored in local storage and applied on load
  • Encrypted cloud backup and restore feature available
  • Easy single-file YAML-based configuration
  • Small bundle size, fully responsive UI and PWA makes the app easy to use on any device
  • Plus lots more...

Live Demos: Demo 1 ┆ Demo 2 ┆ Demo 3

Screenshots Screenshots

Recording

Demo


Getting Started πŸ›«

For full setup instructions, see: Getting Started

Deploying from Docker Hub 🐳

You will need Docker installed on your system

docker run -d \
  -p 8080:80 \
  -v /root/my-local-conf.yml:/app/public/conf.yml \
  --name my-dashboard \
  --restart=always \
  lissy93/dashy:latest

After making changes to your configuration file, you will need to run: docker exec -it [container-id] yarn build to rebuild. You can also run other commands, such as yarn validate-config this way too. Container ID can be found by running docker ps.

Deploying from Source πŸš€

You will need both git and the latest or LTS version of Node.js installed on your system

  • Get Code: git clone [email protected]: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

After making changes to your configuration file, you will need to run: yarn build to rebuild.


Configuring πŸ”§

For full configuration documentation, see: Configuring

Dashy is configured with a single YAML file, located at ./public/conf.yml (or ./app/public/conf.yml for Docker). Any other optional user-customizable assets are also located in the ./public/ directory, e.g. favicon.ico, manifest.json, robots.txt and web-icons/*. If you are using Docker, the easiest way to method is to mount a Docker volume (e.g. -v /root/my-local-conf.yml:/app/public/conf.yml)

In the production environment, the app needs to be rebuilt in order for changes to take effect. This can be done with yarn build, or docker exec -it [container-id] yarn build if you are using Docker (where container ID can be found by running docker ps). You can check that your config matches Dashy's schema before deploying, by running yarn validate-config.

You may find these example config helpful for getting you started


Theming 🎨

For full configuration documentation, see: Theming

The app comes with a number of built-in themes, but it's also easy to write you're own. All colors, and most other CSS properties make use of CSS variables, which makes customizing the look and feel of Dashy very easy.

You can also apply custom CSS overrides directly through the UI (Under Config menu --> Custom CSS), or specify it in your config file under appConfig.customCss. If you have a lot of custom styles, you can pass in the path to a stylesheet, in appConfig.externalStyleSheet.


Cloud Backup & Sync ☁

For full documentation, see: Cloud Backup & Sync

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, using crypto.js's AES method, using the users chosen password as the key. The data is then sent to a Cloudflare worker (a platform for running serverless functions), and stored in a KV data store.


Developing 🧱

For full development documentation, see: Developing

  1. Get Code: git clone [email protected]:Lissy93/dashy.git and cd dashy
  2. Install dependencies: yarn
  3. Start dev server: yarn dev

Hot reload is enabled, so changes will be detected automatically, triggering the app to be rebuilt and refreshed. Ensure that all lint checks and tests are passing before pushing an code or deploying the app.

If you are new to Vue.js or web development and want to learn more, here are some resources to help get you started. Dashy is a pretty straight-forward application, so would make an ideal candidate for your first PR!


Contributing πŸ˜‡

For full contributing guide, see: Contributing

Pull requests are welcome, and would by much appreciated!

Some ideas for PRs include: bug fixes, improve the docs, add new themes, implement a new widget, add or improve the display options, improve or refactor the code, or implement a new feature.

Before you submit your pull request, please ensure the following:

  • Must be backwards compatible
  • All lint checks and tests must pass
  • If a new option in the the config file is added, it needs to be added into the schema, and documented in the configuring guide
  • If a new dependency is required, it must be essential, and it must be thoroughly checked out for security or efficiency issues
  • Your pull request will need to be up-to-date with master, and the PR template must be filled in

Support πŸ™‹β€β™€οΈ

If you've found a bug, or something that isn't working as you'd expect, please raise an issue, so that it can be resolved. Similarly, if you're having trouble getting things up and running, feel free to ask a question. Feature requests and feedback are also welcome, as it helps Dashy improve.

For general questions about any of the technologies used, you should search the web, or open a question on StackOverflow

If you need to get in touch securely with the author me, you can send any messages to me at:


Documentation πŸ“˜


Credits πŸ†

Contributors πŸ‘₯

Auto-generated contributors

(^^ It's lonely here all by myself - submit a PR to become listed as a contributor!)

Dependencies πŸ”—

This app definitely wouldn't have been quite so possible without the making use of the following package and components. Full credit and big kudos to their respective authors, who've done an amazing job in building and maintaining them.

Core

At it's core, the application uses Vue.js, as well as it's services. Styling is done with SCSS, JavaScript is currently Babel, (but I am in the process of converting to TypeScript), linting is done with ESLint, the config is defined in YAML, and there is a simple Node.js server to serve up the static app.

Frontend Components
Utilities
  • crypto-js - Encryption implementations by @evanvosberg and community MIT
  • axios - Promise based HTTP client by @mzabriskie and community MIT
  • ajv - JSON schema Validator by @epoberezkin and community MIT
Backup & Sync Server

Although the app is purely frontend, there is an optional cloud backup and restore feature. This is built as a serverless function on Cloudflare workers using KV and web crypto

Alternatives πŸ™Œ

There are a few self-hosted web apps, that serve a similar purpose to Dashy. If you're looking for a dashboard, and Dashy doesn't meet your needs, I highly recommend you check these projects out! Including, but not limited to: HomeDash2, Homer (Apache License 2.0), Organizr (GPL-3.0 License) and Heimdall (MIT License)


License πŸ“œ

Copyright Β© 2021 Alicia Sykes <https://aliciasykes.com>

Permission is hereby granted, free of charge, to any person obtaining a copy of this
software and associated documentation files (the β€œSoftware”), to deal in the Software
without restriction, including without limitation the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell copies of the Software, and to permit
persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or
substantial portions of the Software.

THE SOFTWARE IS PROVIDED β€œAS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWAREOR THE USE
OR OTHER DEALINGS IN THE SOFTWARE.

Dashy - A feature-rich dashboard for your homelab πŸš€ | Product Hunt

Issues
  • Yarn build not working

    Yarn build not working

    Hello,

    When I try to run yarn build as indicated in the instructions, I am presented with an [Errno 2] No such file or directory: 'build'

    opened by jacobhweeks 4
  • some error message when I build the docker image

    some error message when I build the docker image

    Hi there!

    I am receiving some error message when I tried to build the docker image. I am following the instruction docker build -t lissy93/dashy .

    Step 7/13 : RUN yarn install
     ---> Running in bd7dc922e3d6
    yarn install v1.22.5
    warning package.json: No license field
    warning [email protected]: No license field
    
    [2/4] Fetching packages...
    info [email protected]: The platform "linux" is incompatible with this module.
    info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
    info [email protected]: The platform "linux" is incompatible with this module.
    info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
    [3/4] Linking dependencies...
    warning " > [email protected]" has incorrect peer dependency "[email protected]".
    warning " > @vue/[email protected]" has incorrect peer dependency "[email protected]>= 1.6.0 < 7.0.0".
    warning "@vue/cli-plugin-eslint > [email protected]" has incorrect peer dependency "[email protected]>=1.6.0 <7.0.0".
    warning " > [email protected]" has unmet peer dependency "[email protected]^2.22.1".
    warning " > [email protected]" has unmet peer dependency "[email protected]^6.4.1".
    warning " > [email protected]" has unmet peer dependency "[email protected]^7.21.5".
    warning " > [email protected]" has unmet peer dependency "[email protected]^4 || ^3 || ^2.3.0 || ^1.7.0".
    warning "eslint-config-airbnb > [email protected]" has unmet peer dependency "[email protected]^2.22.1".
    warning " > [email protected]" has unmet peer dependency "[email protected]^3.0.0 || ^4.0.0".
    

    I am still able to run the container with the following instruction: docker run -it -p 8080:80 --rm --name my-dashboard lissy93/dashy but those messages might be a problem.

    opened by cerealconyogurt 3
  • displayData ignored

    displayData ignored

    Hello, first let me thank you for this shiny dashboard, I really love the whole feeling. I'm struggling with how to customize frames with displayData. Here is my config tree :

    dashy_disp_bug_1

    The YAML version :

    dashy_disp_bug_2

    I would expect the "Informations" frame to have a 4x1 format with large icons, but nothing changes when I save the config :

    dashy_disp_bug_3

    PS : Btw there is a wording mistake, the message says "Changes seved successfully"

    opened by shadowking001 3
  • [Mobile] Layout tab not showing in portrait

    [Mobile] Layout tab not showing in portrait

    When I open up Dashy on my mobile (Pixel 4a) in portrait view, I can't see the layout config menu :

    dashy_config_tab

    Portrait view :

    Screenshot_20210608-153052

    If I click on the "+", nothing happens, only the icon is changing :

    Screenshot_20210608-153037

    Landscape view :

    Screenshot_20210608-152935

    When I click on it the tab is correctly being displayed :

    Screenshot_20210608-153003

    opened by shadowking001 2
  • Adds issue templates

    Adds issue templates

    Adds issue templates for:

    • Bug reports
    • Feature requests
    • Questions
    • Feedback
    opened by Lissy93 1
  • UI Config Editor Feature

    UI Config Editor Feature

    This feature adds the ability for the user to edit their configuration directly from the UI.

    This includes the ability for the user to now:

    • Edit all section and item data using a rich JSON editor
    • Download/ backup conf.yml directly from the UI
    • Edit site meta data: title, description, footer, etc
    • Reset all locally stored data to the initial state
    • Also includes a new toast component, for subtle notifications
    • As well as bug fixes, UI improvements and a general refactor :)

    There are a few limitations:

    • Sections can be edited through the JSON editor, and site meta through a form, but currently that is all
    • Data is stored locally, the user must still use the conf.yml in order for changes to persist across devices
    • The schema for conf.yml is not yet completed, meaning that validation is currently very basic
    opened by Lissy93 0
  • Adds ability for user to add custom nav bar links plus UI improvements

    Adds ability for user to add custom nav bar links plus UI improvements

    New features:

    • User can add custom nav bar links from the Config Settings menu
    • Better UI styling to the config menu
    • New icons inside buttons
    opened by Lissy93 0
  • Feature: Adds Cloud Backup and Restore

    Feature: Adds Cloud Backup and Restore

    An optional feature that enables the user to backup their configuration to a cloud function, and then restore it on another instance of Dashy.

    opened by Lissy93 0
  • Implements custom CSS editor, customizable item grids, other new features and bug fixes

    Implements custom CSS editor, customizable item grids, other new features and bug fixes

    New Features ✨

    • Enables the user to apply, edit and save custom CSS from the UI
    • Lets the user specify number of items per row #7

    Small Improvements 🌿

    • Launch backup sync menu from config menu
    • Adds note about local data storage
    • Built a fancy scrollbar
    • Adds syntax highlighting to YAML output
    • Updates manifest

    Bug Fixes πŸ›

    • Disable searching when item iframe is open
    • Fixed typo in Saved dialog, Re #7
    • Fixed bug causing error for adding navbar items to empty list
    opened by Lissy93 0
  • Adds new themes: Minimal, material and material dark

    Adds new themes: Minimal, material and material dark

    Also includes some minor bug fixes, better theme support and the ability to add an icon to a given section.

    opened by Lissy93 0
  • Configuration frame stucked

    Configuration frame stucked

    Hello (again),

    When I'm cliking on the wrench, I end up on the config menu but I can't navigate between tabs in the upper part of the frame. Plus, of the six buttons on the landing config page only download config and reset local settings are effective.

    I tried with Chrome and Firefox, normal and private mode. Same behaviour. Using a reverse proxy to access dashy URL, I'll use an IP to see if it behaves differently.

    πŸ› Bug 
    opened by shadowking001 7
  • Implements an option for user to force website favicon

    Implements an option for user to force website favicon

    This PR introduces two new properties in the config file, under appConfig:

    appConfig:
      forceRootFavicon: true
      itemFaviconLocation: /favicon.ico
    
    • forceRootFavicon - Boolean, optional, defaults to false. When set to true favicons will be fetched from a website source, no matter of their source.
    • itemFaviconLocation - String, optional, defaults to /favicon.ico. Can be used to specify a custom path to an icon, e.g. /assets/pwa-192x192.png

    This PR is a fix the the issue raised in #14 - When an item's icon is set to favicon, the asset will be resolved using Google API's if the URL is a remote website, or using /favicon.ico if it is a locally hosted service accessible via IP address. The issue is that when a local service has a domain name, the Google method will be used, resulting in a 404. Not to mention, many users will not be comfortable with requests being sent to Google.

    opened by Lissy93 0
  • Dashy reaching out to google for favicons?

    Dashy reaching out to google for favicons?

    First of all thank you for Dashy, so far I am really loving it! But...

    I have been unable to get favicons to work properly for self-hosted (only locally available) sites and so in looking at the source I am seeing this for the img tag, I've replaced the domain=url for this posting...

    img src="https://s2.googleusercontent.com/s2/favicons?domain=https://locallyhostedapp.mydomain.com" class="tile-icon medium "

    This doesn't appear that it would function for self-hosted sites that are not avaialble externally and I would prefer that my self-hosted dashboard not reach out to google to display each icon, do I just have this wrong?

    πŸ€·β€β™‚οΈ Question 
    opened by blaxer 2
  • Configuration dependant on URL

    Configuration dependant on URL

    Hello,

    I'm working of my personal dashboard for some days now, and I have spotted a strange behaviour. Dashy is atm running backend behind my reverse proxy, e.g. I'm reaching it through dashy.ndd.tld Until now I was using Dashmachine on www.ndd.tld, and I'd like to make dashy my primary dashboard from now on.

    When I tweak Nginx to switch subdomains, I'm getting back to the initial configuration, see dashy.ndd.tld here :

    dashy_rp_1

    www.ndd.tld :

    dashy_rp_2

    Context :

    • Container restart doesn't affect this behaviour.
    • If I NAT container's port 80 to host (instead of using https to access dashy), I also get the default page.

    So it seems that the configuration is related to the URL. But I thought that in any case, it should load the conf.yml file in the container. So I tried to check conf.yml in the container, I felt upset when I saw that my conf.yml file is the default one :

    docker exec -it dashy cat /usr/share/nginx/html/conf.yml

    dashy_rp_3

    My guess is that when I edit my config through the UI, changes are saved elsewhere than in the conf.yml file. Not the best way to ensure data persistance.

    If it can help you, here is my docker-compose file :

    version: '2.1'
    services:
    
       dashy:
          image: lissy93/dashy
          container_name: dashy
          networks:
             - net-proxy
          # for testing purpose only
          ports:
             - 22080:80
          volumes:
             - icons:/usr/share/nginx/html/item-icons
             - config:/usr/share/nginx/html
          labels:
    #         - "diun.enable=true"
             - "com.centurylinklabs.watchtower.enable=true"
          restart: unless-stopped
    
    volumes:
    
       icons:
       config:
    
    networks:
    
       net-proxy:
          external: true
    

    Another thing that disturbs me is the backup/restore config tool. Besides it is a rather cool feature, I can't find any mention of WHERE my data is saved. This stands as a real privacy concern imho.

    Staying available if you need further details.

    πŸ› Bug 
    opened by shadowking001 5
  • Is the docker image published?

    Is the docker image published?

    Hey @Lissy93 ! Just curious if this image has been published to any registry? I’d be interested to use Dashy, but in my use case I’ll need to be pulling the image. While I can certainly publish it, I’d hate to build the automation around that (or plant a flag in a registry) if this is already done or on your radar.

    Thanks for the awesome project!

    πŸ¦„ Feature Request 
    opened by turnrye 3
Owner
Alicia Sykes
Turning caffeine into code πŸ₯€
Alicia Sykes
Vue Material Dashboard - Inspired by Material Dashboard of Creative Tim.

vue-material-dashboard Vue Material Dashboard - Inspired by Material Dashboard of Creative Tim. This project is using Vue 2 and based on HTML version

Luc 158 May 1, 2021
Vue Light Bootstrap Dashboard - FREE BOOTSTRAP 4 VUEJS ADMIN TEMPLATE

Vue Light Bootstrap Dashboard Admin dashboard based on light bootstrap dashboard UI template + vue-router This project is a vue version of Light boots

Creative Tim 672 Jun 10, 2021
Cryptocurrency Dashboard made with Vue

Vue Crypto Dashboard A Cryptocurrency Dashboard build with Vue JS, PWA enabled, Binance Websocket API for realtime price, amChart for displaying histo

Jayesh Vachhani 136 Jun 14, 2021
The First Open-Source Laravel Vue headless CMS (PWA dashboard + CRUD + API generator & more) for more productivity !

The First Open-Source Laravel Vue headless PWA CMS. PWA dashboard + CRUD + API generator & more. Try live demo Badaso is a open-source Laravel Vue hea

Uasoft 155 Jun 14, 2021
A simple expense tracking application

Table Of Contents Description Demo Tech Stack Server Side Client Side Screenshots Local Building Config Future Enhancements How to Contribute License

Vinay 129 Jun 8, 2021
FHEMApp ist eine Web-Application zur Steuerung deiner Smarthome Umgebung.

FHEMApp ist eine Web-Application zur Steuerung deiner Smarthome Umgebung. Sie wurde als Frontend fΓΌr den Einsatz mit FHEM(tm) entwickelt. FHE

jens 12 Jun 2, 2021
redesign blog using material design

Materialize Blog A new blog management system designed according to Google Material Design. Back-end base on Laravel 5.3, a PHP application framework

forehalo 211 Apr 25, 2021
A Vue.js web application for Freedomotic Open IoT framework

fd-vue-webapp A Vue.js client for Freedomotic framework. Scope of the project This repository contains the implementation of a front end client for Fr

Freedomotic 53 Apr 23, 2021
Wiki.js | A modern and powerful wiki app built on Node.js

A modern, lightweight and powerful wiki app built on NodeJS Official Website Documentation Requirements Installation Demo Change Log Feature Requests

requarks.io 13k Jun 13, 2021
CoreUI Vue is free Vue admin template based on Bootstrap 4

CoreUI Free Vue Bootstrap Admin Template Description Why we decided to create CoreUI? Please read this article: Jack of all trades, master of none. Wh

CoreUI 2.8k Jun 13, 2021
πŸ“Œ Home Assistant browser extension

Home Assistant Extension for Chrome and Firefox Unofficial extension to quickly access your Home Assistant dashboard from everywhere Setup In your Lov

Boris K 115 Jun 5, 2021
A cross-platform GUI and ETCD client

ETCD Manager ETCD Manager Features Coming: v1.3 Available now Planned Installation End users.. Contributors.. Running the dev build Usage and support

Tamas Geschitz 164 Jun 8, 2021
Laqu-l 115 May 5, 2021
A WordPress eCommerce platform for developers

Hubaga A WordPress eCommerce plugin for developers. It is lightweight and simple to use. Looking for a premium for wordPress search plugin? Check out

null 21 Nov 27, 2020