Nighttab: Self Hosted HTML

Created on 8 Sep 2020  路  12Comments  路  Source: zombieFox/nightTab

This is THE perfect starting page to use on all of your devices. It would be perfect simply have it self hosted. Any chances to make it easier to follow new releases without always using gulp?

Most helpful comment

I came across this project yesterday and i fully agree with you. It is indeed impressively good!
I wanted to self host this as well instead of a browser add-on.

I have used a small docker container to build the npm and then copied the /build/web folder over.

#run the node docker container (note that i run the armv7 image as i'm on a raspberry, you can use x86_64 version if needed)
docker run -d --rm --name nighttab -p 2020:8000 arm32v7/node:latest 

#run a bash inside the container
docker exec -it nginxnight /bin/bash

#clone the repo
git clone https://github.com/zombieFox/nightTab

#cd into the repo folder
cd nightTab

#install the dependencies 
npm install build

#build the project
npm run build

#exit the container bash 
exit

#now we are back on the host and we copy the built project
docker cp nighttab:/nightTab/build/web nightTab/

Now you have the nightTab folder ready for selfhost on your docker host.

Hope it helps!

I will open a separate issue for the security issue reported during the build.

All 12 comments

I came across this project yesterday and i fully agree with you. It is indeed impressively good!
I wanted to self host this as well instead of a browser add-on.

I have used a small docker container to build the npm and then copied the /build/web folder over.

#run the node docker container (note that i run the armv7 image as i'm on a raspberry, you can use x86_64 version if needed)
docker run -d --rm --name nighttab -p 2020:8000 arm32v7/node:latest 

#run a bash inside the container
docker exec -it nginxnight /bin/bash

#clone the repo
git clone https://github.com/zombieFox/nightTab

#cd into the repo folder
cd nightTab

#install the dependencies 
npm install build

#build the project
npm run build

#exit the container bash 
exit

#now we are back on the host and we copy the built project
docker cp nighttab:/nightTab/build/web nightTab/

Now you have the nightTab folder ready for selfhost on your docker host.

Hope it helps!

I will open a separate issue for the security issue reported during the build.

Thanks @tato69 and @AlfaJackal for the feedback.

This is similar to another issue, please see #171 for more information.

It is possible to modify default files and self host. However I don't have any plans to change the build process, I thought it was pretty straight forward as it stands.

How might it be made simpler without using gulp? Could I have some examples of this please?

Thanks to you for the awesome work! @zombieFox

Probably the most convenient way to ease the self-host, is to create a github release with tar.gz to download.
Not sure how complex this would be to fit in your build process.

Just my 2 cents

I came across this project yesterday and i fully agree with you. It is indeed impressively good!

I wanted to self host this as well instead of a browser add-on.

I have used a small docker container to build the npm and then copied the /build/web folder over.

Cheers, that looks pretty easy. I will try that. I am not really into dockerfiles, but it should not be too complicated to automate this process, right?

I only ask my self if this will be convenient enough for editing and saving bookmarks and settings across devices. If I understood correctly, I still have to edit bookmarks.js and state.js manually with a code editor and not from the gui and from any device.

I am using minimum five different devices here. So every time I change something in nighttab I will have to manually export/import the .json to all devices and browsers. Or editing the .js - both is not very good.

-- EDIT
There is a -it missing after docker run ... 馃槈 But then it works! Why do you expose Port 2020->8000?

Just one more thought: Wouldn't it be the easiest way to create a dockerfile and use a nginx image as a base? Then install nodejs and then execute your commands for building the image? If you do so with a dockerfile on nginx, nighttab should be easy to enroll. Only thing that is a showstopper is editing and saving across devices without exporting and importing.

I only ask my self if this will be convenient enough for editing and saving bookmarks and settings across devices. If I understood correctly, I still have to edit bookmarks.js and state.js manually with a code editor and not from the gui and from any device.

I am using minimum five different devices here. So every time I change something in nighttab I will have to manually export/import the .json to all devices and browsers. Or editing the .js - both is not very good.

You don't need to make any manual modification. Everything is done from the GUI. Once is done on the first device will be available on all devices.

@zombieFox is there a way to export the config json via command line? Or a set of files to be copied as a backup?

-- EDIT
There is a -it missing after docker run ... 馃槈 But then it works! Why do you expose Port 2020->8000?

I prefer to run the container without -it and then exec /bin/bash. The container starts with a node console and i'm not familiar with it...
I forward a random port to see the built result by running python3 -m http.server 8000 inside the build/web folder

Just one more thought: Wouldn't it be the easiest way to create a dockerfile and use a nginx image as a base? Then install nodejs and then execute your commands for building the image? If you do so with a dockerfile on nginx, nighttab should be easy to enroll. Only thing that is a showstopper is editing and saving across devices without exporting and importing.

The easiest would be to create a docker file to build multiarch images. But in my opinion should be part of the build/release process not just a set and forget image with no updates and no maintenance. It's up to the project owner to decide if is interesting or not for him to maintain.
@zombieFox PS if there is any interest in this direction, i will be glad to give it a try even tho i'm nowhere an expert

You don't need to make any manual modification. Everything is done from the GUI. Once is done on the first device will be available on all devices.

Cool, will give it a shot! It definitely would be interesting to know where the modified data has been stored.

The easiest would be to create a docker file to build multiarch images. But in my opinion should be part of the build/release process not just a set and forget image with no updates and no maintenance. It's up to the project owner to decide if is interesting or not for him to maintain.

I'd agree on that. It should fit pretty well in the github workflow to publish a docker image:
https://docs.github.com/en/actions/language-and-framework-guides/publishing-docker-images#publishing-images-to-docker-hub

@zombieFox PS if there is any interest in this direction, i will be glad to give it a try even tho i'm nowhere an expert

Same here: Could also try to support here.

I'm afraid i was wrong... Even tho you serve the web version the changes are still stored on the browser local storage and will be retained across the devices.
@zombieFox Would it be complicated to implement a different storage method for those who prefer self-hosting nightTab?

Probably the most convenient way to ease the self-host, is to create a github release with tar.gz to download.
Not sure how complex this would be to fit in your build process.

I'm not sure I understand this, do you mean saving contents of build/web/... as a zip file and adding that to the release page?

@zombieFox is there a way to export the config json via command line? Or a set of files to be copied as a backup?

I don't think this is possible as the JSON export file is created from the state stored in local storage of the browser. So in the build process the user state does not exist yet.


Just one more thought: Wouldn't it be the easiest way to create a dockerfile and use a nginx image as a base? Then install nodejs and then execute your commands for building the image? If you do so with a dockerfile on nginx, nighttab should be easy to enroll. Only thing that is a showstopper is editing and saving across devices without exporting and importing.

The easiest would be to create a docker file to build multiarch images. But in my opinion should be part of the build/release process not just a set and forget image with no updates and no maintenance. It's up to the project owner to decide if is interesting or not for him to maintain.
@zombieFox PS if there is any interest in this direction, i will be glad to give it a try even tho i'm nowhere an expert

@tato69 I'm afraid all of this is beyond me, I don't know much of anything about docker. I can't commit to maintaining something like this I'm afraid. If you wish to fork the project to explore it please do.

I'm afraid i was wrong... Even tho you serve the web version the changes are still stored on the browser local storage and will be retained across the devices.
@zombieFox Would it be complicated to implement a different storage method for those who prefer self-hosting nightTab?

I think it might, the data in the local storage is the source of truth for the user preference to make sure the user never loses their set up. What storage solution might a self hosted version of nightTab use?

@tato69 I'm afraid all of this is beyond me, I don't know much of anything about docker. I can't commit to maintaining something like this I'm afraid. If you wish fork the project to explore it please do.

@zombieFox Will probably give it a try and keep you posted!

I think it might, the data in the local storage is the source of truth for the user preference to make sure the user never loses their set up. What storage solution might a self hosted version of nightTab use?

@zombieFox After you build the project and expose the /build/web folder, if a modification is done by the user, where does changes are being recorded? I mean is there a file on the filesystem which contains the configuration?

btw thanks a lot for all the attention and time you are investing in this 馃憤

@zombieFox After you build the project and expose the /build/web folder, if a modification is done by the user, where does changes are being recorded? I mean is there a file on the filesystem which contains the configuration?

Opening the index.html file in /build/web/ in the browser, the changes a user makes are recored in the mod.current object found in state.js while in memory. At the same time a copy of the state is saved to local storage. This is loaded on a refresh and restored/replaces the mod.current object. Thus saving and using the users preferences.

btw thanks a lot for all the attention and time you are investing in this 馃憤

No problem. I'm sorry I can't be of much more help.

Hi @zombieFox @AlfaJackal @tato69

I've just created a PR which gives basic sync functionality to both backup the data and also restore it on multiple devices:
https://github.com/zombieFox/nightTab/pull/227

This would currently work well for self hosted installations, if it gets merged then I'd consider hosting a public sync server so anyone can use it and not have to worry local-only data or manually syncing data across devices.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Zbergen-cli picture Zbergen-cli  路  4Comments

tmeuze picture tmeuze  路  5Comments

OofFan picture OofFan  路  5Comments

nickjcoco picture nickjcoco  路  5Comments

smaragdus picture smaragdus  路  5Comments