Git Product home page Git Product logo

flame's Introduction

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

  1. Obtain API Key from Weather API.

    Free plan allows for 1M calls per month. Flame is making less then 3K API calls per month.

  2. Get lat/long for your location. You can get them from latlong.net.
  3. 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.

flame's People

Contributors

davidchalifoux avatar dependabot[bot] avatar ekremparlak avatar grahamhelton avatar idevjoe avatar itsbhanusharma avatar luckyf avatar oregonpillow avatar pa-sowa avatar pawelmalak avatar petemidge avatar pmjklemm avatar pruizlezcano avatar rgriffogoes avatar samuel-martineau avatar soulteary avatar strig avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flame's Issues

Longitude / Latitude not working

Using the long/lat data from latlong.net as instructed, Flame will not accept any value in the "location latitude" field. Errors is "Enter a valid value"

v 1.2 broken in Firefox?

It works in Safari, but not in Firefox and Chrome. I use Traefik as a proxy, and I think that could be the reason, but this issue what not present in the previous version.

Firefox:

DOMException: The operation is insecure. react-dom.production.min.js:216:199
    React 5
    unstable_runWithPriority scheduler.production.min.js:18
    React 4
    unstable_runWithPriority scheduler.production.min.js:18
    React 4
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
    F scheduler.production.min.js:16
    onmessage scheduler.production.min.js:12
    (Async: EventHandlerNonNull)
    <anonymous> scheduler.production.min.js:12
    l (index):1
    <anonymous> index.js:4
    l (index):1
    <anonymous> React
    l (index):1
    <anonymous> React
    l (index):1
    144 main.6f693952.chunk.js:1
    l (index):1
    r (index):1
    t (index):1
    <anonymous> main.6f693952.chunk.js:1


Uncaught DOMException: The operation is insecure. main.6f693952.chunk.js:1
    We WeatherWidget.tsx:53
    Bi React
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
    F scheduler.production.min.js:16
    onmessage scheduler.production.min.js:12
    (Async: EventHandlerNonNull)
    <anonymous> scheduler.production.min.js:12
    l (index):1
    <anonymous> index.js:4
    l (index):1
    <anonymous> React
    l (index):1
    <anonymous> React
    l (index):1
    144 main.6f693952.chunk.js:1
    l (index):1
    r (index):1
    t (index):1
    <anonymous> main.6f693952.chunk.js:1

Chrome:

WeatherWidget.tsx:53 Mixed Content: The page at 'https://flame.hostname.tld/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://flame.hostname.tld/socket'. This request has been blocked; this endpoint must be available over WSS.
(anonymous) @ WeatherWidget.tsx:53
react-dom.production.min.js:216 DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at https://flame.hostname.tld/static/js/main.6f693952.chunk.js:1:14327
    at Bi (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:171725)
    at H.unstable_runWithPriority (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:189537)
    at jL (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:111896)
    at Pi (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:171186)
    at https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:171097
    at F (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:188596)
    at MessagePort.p.port1.onmessage (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:187318)
er @ react-dom.production.min.js:216
scheduler.production.min.js:12 Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at https://flame.hostname.tld/static/js/main.6f693952.chunk.js:1:14327
    at Bi (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:171725)
    at H.unstable_runWithPriority (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:189537)
    at jL (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:111896)
    at Pi (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:171186)
    at https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:171097
    at F (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:188596)
    at MessagePort.p.port1.onmessage (https://flame.hostname.tld/static/js/2.6b40f2c2.chunk.js:2:187318)

Safari, works, but gives this:

[Warning] [blocked] The page at https://flame.hostname.tld/ was not allowed to run insecure content from ws://flame.hostname.tld/socket. (main.6f693952.chunk.js, line 1)

Theme changes depending on device accessing.

Firstly, I love the work you've done on this. Was super easy to set up.

Secondly, I have set this up through reverse proxy to access externally. One issue I am facing is that the settings do not carry over between devices (other than the weather). The custom name and theme have to be re-entered. Is this by design, or an issue.

Either way, I appreciate this solution. Makes it super simple for me to organise all my applications and links in a central location without having to create a website. Thanks mate.

API?

Would it be possible with some sort of API, that you can add labels to your docker-compose files and automatically populate Flames dashboard?

Re-organize/sort listing

Would be sweet if you could drag'n'drop the order of your different applications/links. Afaik today it appears in the order of when you added them.

EDIT: Until you do a refresh, then it sorts it alphabetically

Custom icons doesn't work when updating

I am not able to edit existing application and replace the mdi icon.

Edit an application, click on "switch to custom icon", select a file, save. Message at bottom of the screen indicates success. However, the icon doesn't actually change.

Custom icons works fine on new entries.

Feature Request: Search Box

I am using the flame as the start page for the browser. However, one thing I missed the most is a search box that forwards the request to the search engine of your choice. Is it's not too much of a trouble to add a search box that accepts custom search?

Here are few examples:

https://www.google.com/search?q=%s
https://duckduckgo.com/?q=%s
http://search.disroot.org/search?q=%s

Docker image for ARM7

Any plans for building a docker image for ARM7 so that this can be setup on Raspberry Pi. I know I can build from source on that but having an official image would be nice.

feature request - hide url in applications

First thank you for this component.

This is purely aesthetic.

Please consider an option to hide the url in applications, as depending on the screen, long urls will offset the column size/gaps.

Thank you

Flame stopped working

I first have to say that I really like flame. It's much easier to configure and looks nicer than Homer which I've been using before.

Unfortunately my flame (running in docker) doesn't start anymore and shows the following logs:

[2021-06-27 16:30:32.932 UTC+0] [INFO] Connected to database
[2021-06-27 16:30:32.933 UTC+0] [INFO] Starting model synchronization
[2021-06-27 16:30:32.938 UTC+0] [ERROR] Unable to connect to the database: SQLITE_ERROR: table apps_backup has 7 columns but 8 values were supplied

Ability to categories to "Applications"

The ability to add different categories for "Applications" similar to how you can do with "Bookmarks".

The ability to add icons for "Bookmarks" would be nice too.

Docker Compose

Hi,

Is it possible to get a docker compose file ?

Thanks

Add app version field somewhere

Sorry if I missed it, but I don't see app version shown anywhere.
Could we get it displayed somewhere, maybe in Settings?
Thank you.

Possibility to keep random people from changing settings

My flame install is accessible from the internet, so I would like a possibility to prohibit all the random people on the internet from changing my settings. There are three ways I imagine it could be realized:

  • setting a password. I.e. you either get asked for a password when you are about to change stuff or you have to go to a different page like flame.domain.tld/admin and put in your password there. That way you could even hide the button in the bottom left corner
  • make changing settings only possible when accessing flame over the local network
  • make changing settings only possible when an environment variable is set to a certain value

Allow Application and Bookmark to provide http[s] - take 2

Since previous attempts were closed without any sensible resolution, I'm opening it again.

It is impossible to use URLs in that form (skipping 'https' or not...):

https://<ip>:<port>
https://<fqdn>:<port>

This is absolutely basic function when it comes to this kind of app. Please make an effort to properly implement it. Not every application offers https redirects and such.

Otherwise it is a great app and would like to use it on daily basis.
Thanks.

building fails on RPi4

root@Pi:~# git clone https://github.com/pawelmalak/flame.git
Cloning into 'flame'...
remote: Enumerating objects: 844, done.
remote: Counting objects: 100% (844/844), done.
remote: Compressing objects: 100% (460/460), done.
remote: Total 844 (delta 444), reused 744 (delta 344), pack-reused 0
Receiving objects: 100% (844/844), 941.55 KiB | 13.08 MiB/s, done.
Resolving deltas: 100% (444/444), done.
root@Pi:~# cd flame/
root@Pi:~/flame# docker build -t flame .
Sending build context to Docker daemon  2.145MB
Step 1/9 : FROM node:14-alpine
14-alpine: Pulling from library/node
535256e01bcb: Pull complete
69982ba3cc3a: Pull complete
23b960c2560a: Pull complete
2f24eee88333: Pull complete
Digest: sha256:f07ead757c93bc5e9e79978075217851d45a5d8e5c48eaf823e7f12d9bbc1d3c
Status: Downloaded newer image for node:14-alpine
 ---> 645fc0c6c966
Step 2/9 : WORKDIR /app
 ---> Running in 7d924c129632
Removing intermediate container 7d924c129632
 ---> e014a2c8034e
Step 3/9 : COPY package*.json .
When using COPY with more than one source file, the destination must be a directory and end with a /

This looks awesome though!

Upload own images as icon

Feature add own image When adding an application/bookmark instead of only the material icons

(but this feature is not that important therefore low prio)

Adding a new application places it at the end

If you add a new application, and go all the way back to the main dashboard page, the application will always be at the end regardless of where it should be alphabetically.

A simple refresh fixes it.

Lock/Hide items behind authentication

This could be implemented with #33.

The main idea is to add new property to apps, categories and bookmarks which would hide them if user is not authenticated. That way we could still provide guest access to certain set of items while require authentication for the rest.

Sort bookmarks

It'll be nice if you could drag'n'drop the order of bookmarks like on the bookmarks category or applications.

Use case-insensitive sorting for the applications list

If I create 3 items with mixed cased letters as the first letter, it ends up with lower-cased items last.

Expected: qBittorrent, Radarr, Sonarr
Actual: Radarr, Sonarr, qBittorrent

This ends up being confusing because the dashboard styling makes all names appear uppercase.

I wanted to submit a pull request, since it'd typically just be a simple COLLATE NOCASE with SQLite, but I'm not familiar with Sequelize. ๐Ÿ˜ž

Applications subtitle shouldn't be shown when there are apps configured

image

The "You don't have any applications. You can add a new one from /application menu" should not appear when there are only unpinned applications configured.

The "Application" header is also not clearly a hyperlink to the application menu on first use, it may be worth adding a "Show all..." button and changing the notification to "There are no pinned applications. You can pin them from the /application menu"

(Quick mockup)
image

URL in Bookmark deletes Colon

When adding a url with a http:// or a https:// it will delete the colon:
Layer-3 Public CDN - ID 010034

While looking at the bookmark via the editor it does show the colon:
Layer-3 Public CDN - ID 010034

Ability to resize text/screen

It would be useful to have a setting to resize the screen (similar to zooming out on your browser). Sometimes long URLs aren't long enough to merge onto a 2nd line so looks cluttered. This would fix it nicely.

Some help on a custom CSS please.

Any pointers for those that don't know anything about it please?
Any samples?
For instance how to change number of columns on the screen or widen the whole usable area.

Much appreciated!

Filter items

I think it would be good to add an app/bookmark filter.
Kind of a search box. Typing in there would narrow down displayed items.

With a large amount of items it would ease finding the right one.

I like how it is done in dashy, working demo here (just type firs letter (s))
https://dashy-demo-1.as93.net/#/

Maybe something to consider later?

WeatherAPI API request failed

Hi,

I keep getting API request failed when saving the WeatherAPI settings.
However, when using the url from:

const res = await axios.get(`http://api.weatherapi.com/v1/current.json?key=${secret.value}&q=${lat.value},${long.value}`);

with my key and lat & long in a browser, does lead to a valid response.

Not sure where to look further?

[New Feature] Multiple pages/dashboards

Would be great to allow creation of multiple pages and controls to get there.

  1. In the simplest form it could be an 'app' or 'bookmark' which loads other page (preferably in the same browser tab).

  2. Other solution for me would be to spin another flame instance and make a bookmark to it. However bookmark/app always opens new page in a new tab. Should be the same tab replacing previous contents.

Thank you.

Suggestion: Highlight tile on hover?

Might I suggest a highlight on hover?

2021-06-09.at.10.43.22.-.Aqua.Catfish.mp4

In the example I just added:

.AppCard_AppCard__1V2_0:hover {
    background-color: RGBA(0,0,0,0.1);
}

.AppCard_AppCard__1V2_0 {
    padding: 10px;
    border-radius: 10px;
}

[#51 cont] Add per-application and per-bookmark option to open it in the same or in a new tab

Thanks for adding the global option, but what I really meant was to add that option to each individual item. For instance I could decide that app-x opens in a new tab, but app-y opens in the same one.
Similarly for each bookmark.

So there could be those global options as introduced in 1.5.2, but also some kind of override per each app/bookmark (maybe a checkbox while editing or add some optional prefix in the URL?).

Apologies if it was not clear from the get-go,

Clear old weather data from database

Right now, every 15 minutes request to the external API is made to get weather data. Data is then saved to the local database to reduce number of calls to the api, reduce latency and provide access to latest weather data even if api is not responding.

There should be a cron job that would run every few hours to delete all previous entries except the latest one.

Allow Application and Bookmark to provide http[s]

"https-only" application will work only if a automatic redirect is in place (somehow a good practice).

Is there any reason to not allow users to define proper protocol? (which could even be something other than http[s])

Weather widget relies on hardcoded host:port

This client code has a hardcoded localhost:5005

client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx

This fails if the app is accessed outside the server, and if the exposed port is changed (e.g: docker deployments):

WeatherWidget.tsx:53 WebSocket connection to 'ws://localhost:5005/' failed:

Only getting a purple screen

After deploying flame using this docker-compose file

version: '3'
services:
    flame:
        image: pawelmalak/flame:latest
        restart: unless-stopped
        volumes:
            - ./data:/app/data
        networks:
            - caddy_net

networks:
  caddy_net:
    external: true

I only get a purple screen when visiting the URL (I use Caddy2 as a reverse proxy). When I refresh the page I can see

Thursday 10, June 2021
Good Evening

Applications

Bookmarks

for a fraction of a second, before only the background color is shown again.

I tried Firefox and vivaldi and both show the same behaviour

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.