How to Set Up Your Own Sweet Dashboard with Honey

Aug 31, 2023 | Programming

Introducing Honey, a delightful dashboard for your home server! Written in pure HTML, CSS, and JS, this dashboard operates flawlessly without the need for a dynamic backend or intricate server configurations. It’s ready to use right out of the box, handling all operations on the client side.

Let’s dive into how you can install, configure, and customize Honey quickly and easily!

Live Demo

Check out the live demonstration of Honey to see it in action: Live Demo

Installation

Getting Honey running on your web server is a breeze. Here’s how:

On Existing Web Server

  1. Download the latest prebuilt archive from the Releases.
  2. Extract the downloaded archive to your web server’s root directory.
  3. You’re done!

Via Docker

If you’re a fan of Docker, you can set up Honey using the following command:

docker run -p 4173:4173 -v pathtoconfig:appdistconfig:ro ghcr.iodani3l0honey:latest

This command does two things:

  • -p 4173:4173: This exposes the HTTP port to your machine.
  • -v pathtoconfig:appdistconfig:ro: This mounts the config directory to your local filesystem in read-only mode, making it secure.

If you have custom icons or background images, simply place them in the config directory, ensuring that the URLs are valid.

Configuration

The configuration file can be found at config/config.json. Here’s where you can tweak the user interface to your liking.

Tweaking the User Interface

Under the ui section, you can customize several keys. Here’s a brief overview:

Key Name Description Available in Settings
name Name shown at the main screen and tab title. Yes
desc Short description shown under title at the main screen. Yes
icon Icon shown at the main screen and as sites favicon. Yes
wallpaper Background image visible when dark mode is disabled. Yes
wallpaper_dark Background image visible when dark mode is enabled. Yes
dark_mode Tells whether dark mode is enabled by default. Yes
open_new_tab Tells whether clicking on a service will open it in a new tab by default. Yes
animations Tells whether UI animations are enabled by default. Yes

Adding Custom Services

The services section allows you to add custom services. Each service is an object with the following structure:

  • name: Your service’s name.
  • desc: Short description of your service.
  • href: URL address of your service.
  • icon: Path to your service’s icon.

For example:

{
    name: "CalDav",
    desc: "Simple CalDav server for calendar sync between various devices.",
    href: "caldav",
    icon: "imgpreviewcaldav.png"
}

Development

If you are looking to develop or customize Honey further, it is built on top of Vite.js. This tool provides faster development and various optimizations.

Preparing a Development Environment

  1. Download the source code using:
  2. git clone https:github.comdani3l0honey
  3. Change to the honey directory:
  4. cd honey
  5. Install required modules:
  6. npm i

Live Server

To run a live server for coding purposes, use:

npm run dev

This command will spin up a HTTP server on localhost:5173. The UI will hot-reload upon saving any source file, streamlining your development process.

Build

To prepare the project for production, run:

npm run build

This command links and optimizes project assets, ensuring they occupy less space and consume less bandwidth. Prebuilt assets will be stored in the dist directory, ready for deployment.

Troubleshooting

If you encounter issues during installation or configuration, here are some troubleshooting tips:

  • Ensure that your web server has permission to access the files in your root directory.
  • Double-check the paths in your Docker command to ensure they’re correct.
  • If the interface isn’t loading, verify that your browser supports the necessary HTML and CSS features.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox