flame

Flame is self-hosted startpage for your server. Easily manage your apps and bookmarks with built-in editors.

5,237

256

5,237

159

View on GitHub

Top Related Projects

Organizr

5,088

HTPC/Homelab Services Organizer - Written in PHP

Heimdall

7,689

An Application dashboard and launcher

homer

9,113

A very simple static homepage for your server.

homepage

18,267

A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.

Quick Overview

Flame is a self-hosted startpage for your server, designed to be a central hub for managing your applications and services. It offers a clean and customizable interface, allowing users to organize their frequently used links, applications, and bookmarks in one place.

Pros

Easy to set up and deploy using Docker
Customizable interface with support for themes and custom CSS
Built-in search functionality for quick access to applications and bookmarks
Supports weather widgets and system monitoring

Cons

Limited advanced features compared to some other dashboard solutions
Requires self-hosting, which may not be suitable for users without technical knowledge
Documentation could be more comprehensive for advanced customization

Getting Started

To get started with Flame, follow these steps:

Ensure you have Docker installed on your system.
Create a docker-compose.yml file with the following content:

version: '3.6'
services:
  flame:
    image: pawelmalak/flame:latest
    container_name: flame
    volumes:
      - /path/to/data:/app/data
      - /var/run/docker.sock:/var/run/docker.sock
    ports:
      - 5005:5005
    environment:
      - PASSWORD=your_password
    restart: unless-stopped

Replace /path/to/data with the desired path for storing Flame's data.
Set your desired password in the PASSWORD environment variable.
Run docker-compose up -d to start Flame.
Access Flame by navigating to http://your-server-ip:5005 in your web browser.

Once set up, you can start adding your applications, bookmarks, and customizing the interface to suit your needs.

Competitor Comparisons

Organizr

5,088

HTPC/Homelab Services Organizer - Written in PHP

Pros of Organizr

More feature-rich with advanced user management and SSO capabilities
Highly customizable with themes and custom CSS support
Integrates with various third-party services and applications

Cons of Organizr

More complex setup and configuration process
Heavier resource usage due to additional features
Steeper learning curve for new users

Code Comparison

Organizr (PHP):

<?php
$organizrAPI = new Organizr\API();
$tabs = $organizrAPI->getTabs();
foreach ($tabs as $tab) {
    echo $tab->getName();
}

Flame (JavaScript):

import { getApps } from './api';

const apps = await getApps();
apps.forEach(app => {
    console.log(app.name);
});

Summary

Organizr is a more comprehensive solution with advanced features and customization options, making it suitable for power users and complex setups. Flame, on the other hand, offers a simpler and more lightweight approach, focusing on ease of use and quick deployment. The code comparison highlights the different languages used (PHP for Organizr, JavaScript for Flame) and showcases basic operations in each project. Choose Organizr for extensive functionality and integrations, or Flame for a streamlined, user-friendly experience.

Heimdall

7,689

An Application dashboard and launcher

Pros of Heimdall

More mature project with a larger user base and community support
Offers a wider range of customization options for tiles and layouts
Supports multiple users with different access levels

Cons of Heimdall

Requires more system resources to run
Setup process can be more complex for beginners
Less frequent updates compared to Flame

Code Comparison

Heimdall (PHP):

public function index()
{
    $apps = App::orderBy('order', 'asc')->get();
    return view('dash', compact('apps'));
}

Flame (JavaScript):

const getApps = async () => {
  const apps = await App.find().sort({ order: 1 });
  return apps;
};

Both projects aim to provide a dashboard for self-hosted services, but they differ in implementation and features. Heimdall is built with PHP and Laravel, offering a more robust and scalable solution for larger deployments. Flame, on the other hand, is a lightweight Node.js application that focuses on simplicity and ease of use.

Heimdall's code structure reflects its more complex architecture, with separate controllers and views. Flame's code is more straightforward, using modern JavaScript practices and a simpler database interaction model.

While Heimdall offers more advanced features, Flame provides a faster and more resource-efficient alternative for users with simpler requirements or limited hardware resources.

homer

9,113

A very simple static homepage for your server.

Pros of Homer

Lightweight and static, requiring no backend
Highly customizable with YAML configuration
Supports multiple themes and custom CSS

Cons of Homer

Less feature-rich compared to Flame
Requires manual updates for service status
Limited built-in integrations

Code Comparison

Homer (YAML configuration):

services:
  - name: "Example Service"
    logo: "assets/tools/sample.png"
    url: "https://example.com"
    subtitle: "Example subtitle"
    tag: "app"

Flame (JSON configuration):

{
  "name": "Example Service",
  "url": "https://example.com",
  "icon": "https://example.com/icon.png",
  "category": "Category Name"
}

Both Homer and Flame are self-hosted dashboard solutions for organizing and accessing web services. Homer focuses on simplicity and customization through YAML configuration, while Flame offers a more feature-rich experience with a built-in backend. Homer is ideal for users who prefer a static, lightweight solution and are comfortable with manual configuration. Flame may be better suited for those who want a more dynamic dashboard with additional features like weather widgets and built-in search functionality.

homepage

18,267

A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.

Pros of Homepage

More customizable with extensive configuration options
Supports a wider range of services and integrations
Active development with frequent updates and new features

Cons of Homepage

Steeper learning curve due to complex configuration
Requires more setup time compared to Flame's simplicity
May be overwhelming for users seeking a basic dashboard

Code Comparison

Homepage configuration (YAML):

---
settings:
  title: My Homepage
services:
  - name: My Service
    icon: favicon
    url: https://example.com

Flame configuration (JSON):

{
  "name": "My App",
  "url": "https://example.com",
  "icon": "https://example.com/favicon.ico"
}

Both projects aim to create personal startpages or dashboards, but they differ in approach. Homepage offers more advanced features and customization options, making it suitable for power users who want granular control over their dashboard. Flame, on the other hand, provides a simpler, more straightforward setup that's easier for beginners or those who prefer a minimalist approach.

Homepage's extensive configuration allows for complex layouts and integrations with various services, while Flame focuses on providing a clean, easy-to-use interface with basic functionality. The choice between the two depends on the user's needs, technical expertise, and desired level of customization.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Flame

Homescreen screenshot

Description

Flame is self-hosted startpage for your server. Its design is inspired (heavily) by SUI. Flame is very easy to setup and use. With built-in editors, it allows you to setup your very own application hub in no time - no file editing necessary.

Functionality

ð Create, update, delete your applications and bookmarks directly from the app using built-in GUI editors
ð Pin your favourite items to the homescreen for quick and easy access
ð Integrated search bar with local filtering, 11 web search providers and ability to add your own
ð Authentication system to protect your settings, apps and bookmarks
ð¨ Dozens of options to customize Flame interface to your needs, including support for custom CSS, 15 built-in color themes and custom theme builder
âï¸ Weather widget with current temperature, cloud coverage and animated weather status
ð³ Docker integration to automatically pick and add apps based on their labels

Installation

With Docker (recommended)

Docker Hub link

docker pull pawelmalak/flame

# for ARM architecture (e.g. RaspberryPi)
docker pull pawelmalak/flame:multiarch

# installing specific version
docker pull pawelmalak/flame:2.0.0

Deployment

# run container
docker run -p 5005:5005 -v /path/to/data:/app/data -e PASSWORD=flame_password pawelmalak/flame

Building images

# build image for amd64 only
docker build -t flame -f .docker/Dockerfile .

# build multiarch image for amd64, armv7 and arm64
# building failed multiple times with 2GB memory usage limit so you might want to increase it
docker buildx build \
  --platform linux/arm/v7,linux/arm64,linux/amd64 \
  -f .docker/Dockerfile.multiarch \
  -t flame:multiarch .

Docker-Compose

version: '3.6'

services:
  flame:
    image: pawelmalak/flame
    container_name: flame
    volumes:
      - /path/to/host/data:/app/data
      - /var/run/docker.sock:/var/run/docker.sock # optional but required for Docker integration
    ports:
      - 5005:5005
    secrets:
      - password # optional but required for (1)
    environment:
      - PASSWORD=flame_password
      - PASSWORD_FILE=/run/secrets/password # optional but required for (1)
    restart: unless-stopped

# optional but required for Docker secrets (1)
secrets:
  password:
    file: /path/to/secrets/password

Docker Secrets

All environment variables can be overwritten by appending _FILE to the variable value. For example, you can use PASSWORD_FILE to pass through a docker secret instead of PASSWORD. If both PASSWORD and PASSWORD_FILE are set, the docker secret will take precedent.

# ./secrets/flame_password
my_custom_secret_password_123

# ./docker-compose.yml
secrets:
  password:
    file: ./secrets/flame_password

Skaffold

# use skaffold
skaffold dev

Without Docker

Follow instructions from wiki: Installation without Docker

Development

Technology

Backend
- Node.js + Express
- Sequelize ORM + SQLite
Frontend
- React
- Redux
- TypeScript
Deployment
- Docker
- Kubernetes

Creating dev environment

# clone repository
git clone https://github.com/pawelmalak/flame
cd flame

# run only once
npm run dev-init

# start backend and frontend development servers
npm run dev

Screenshots

Apps screenshot

Bookmarks screenshot

Settings screenshot

Themes screenshot

Usage

Authentication

Visit project wiki to read more about authentication

Search bar

Searching

The default search setting is to search through all your apps and bookmarks. If you want to search using specific search engine, you need to type your search query with selected prefix. For example, to search for "what is docker" using google search you would type: /g what is docker.

For list of supported search engines, shortcuts and more about searching functionality visit project wiki.

Setting up weather module

Obtain API Key from Weather API.

Free plan allows for 1M calls per month. Flame is making less then 3K API calls per month.
Get lat/long for your location. You can get them from latlong.net.
Enter and save data. Weather widget will now update and should be visible on Home page.

Docker integration

In order to use the Docker integration, each container must have the following labels:

labels:
  - flame.type=application # "app" works too
  - flame.name=My container
  - flame.url=https://example.com
  - flame.icon=icon-name # optional, default is "docker"
# - flame.icon=custom to make changes in app. ie: custom icon upload

"Use Docker API" option must be enabled for this to work. You can find it in Settings > Docker

You can also set up different apps in the same label adding ; between each one.

labels:
  - flame.type=application
  - flame.name=First App;Second App
  - flame.url=https://example1.com;https://example2.com
  - flame.icon=icon-name1;icon-name2

If you want to use a remote docker host follow this instructions in the host:

Open the file /lib/systemd/system/docker.service, search for ExecStart and edit the value

ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:${PORT} -H unix:///var/run/docker.sock

The above command will bind the docker engine server to the Unix socket as well as TCP port of your choice. â0.0.0.0â means docker-engine accepts connections from all IP addresses.

Restart the daemon and Docker service

sudo systemctl daemon-reload
sudo service docker restart

Test if it is working

curl http://${IP}:${PORT}/version

Kubernetes integration

In order to use the Kubernetes integration, each ingress must have the following annotations:

metadata:
  annotations:
  - flame.pawelmalak/type=application # "app" works too
  - flame.pawelmalak/name=My container
  - flame.pawelmalak/url=https://example.com
  - flame.pawelmalak/icon=icon-name # optional, default is "kubernetes"

"Use Kubernetes Ingress API" option must be enabled for this to work. You can find it in Settings > Docker

Import HTML Bookmarks (Experimental)

Requirements
- python3
- pip packages: Pillow, beautifulsoup4
Backup your db.sqlite before running script!
Known Issues:
- generated icons are sometimes incorrect

pip3 install Pillow, beautifulsoup4

cd flame/.dev
python3 bookmarks_importer.py --bookmarks <path to bookmarks.html> --data <path to flame data folder>

Custom CSS and themes

See project wiki for Custom CSS and Custom theme with CSS.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot