mirror of
https://codeberg.org/dragongoose/safetwitch.git
synced 2024-09-06 00:32:32 +00:00
189 lines
5.5 KiB
Markdown
189 lines
5.5 KiB
Markdown
# SafeTwitch
|
|
|
|
SafeTwitch is a privacy respecting frontend for [twitch.tv](https://twitch.tv/)
|
|
|
|
The main advantages of SafeTwitch are:
|
|
|
|
- Private: Every request is proxied through the server, and no logs are kept.
|
|
- Lightweight: Compared to twitch, SafeTwitch is optimized for speed and usability.
|
|
|
|
</br>
|
|
|
|
You can visit it here, the official instance, at https://safetwitch.exozy.me
|
|
|
|
Do you want to help translate? You can do it over here on weblate! https://weblate.exozy.me/projects/safetwitch/frontend/en/
|
|
|
|
# Okay, but why?
|
|
|
|
It is impossible to use Twitch without being bombarded with tons of ads, multiple trackers, and enourmous page sizes and loading times. This project aims to fix these issues, by removing all trackers, have much smaller page sizes, and very fast loading times.
|
|
|
|
# Features
|
|
|
|
### User features
|
|
|
|
- [x] No connection to twitch/amazon
|
|
- [x] Lightweight on server and client
|
|
- [x] No Ads or tracking
|
|
- [x] No outside connections, only connection is the instance
|
|
- [x] Uses [Vue](https://vuejs.org/) for a speedy experience
|
|
- [x] No logs
|
|
- [x] Much smaller pages compared to Twitch (<600kb compared to >8.2mb)
|
|
- [x] Follow streamers locally to have a more personalized feel
|
|
- [x] Infinite scrolling
|
|
|
|
### Technical features
|
|
|
|
- [x] Public API
|
|
- [x] No official APIs are used
|
|
- [x] No rate limiting
|
|
- [x] Uses a custom Twitch webscraper
|
|
|
|
It's not all sunshine and rainbows though, and still has various cons, including
|
|
- SafeTwitch was a learning project
|
|
- dragongoose is silly (can't even drive yet 😔)
|
|
- Uses Vue, which relies on Javascript
|
|
|
|
You aren't forced to use SafeTwitch, so use whatever suits you the most!
|
|
Heres some other notable twitch projects
|
|
- [Xtra](https://f-droid.org/packages/com.github.andreyasadchy.xtra/), a Twitch client focused on providing the best viewing and chatting experience on mobile devices
|
|
- [Twire](https://f-droid.org/packages/com.perflyst.twire/), an ad free Twitch browser and stream player for Android.
|
|
- [Streamlink Twitch Gui](https://streamlink.github.io/streamlink-twitch-gui/), A multi platform Twitch.tv browser for Streamlink
|
|
|
|
# Donations
|
|
|
|
Donations towards development are not accepted. I really thank you for feeling the need to donate, it does mean a lot to me!
|
|
|
|
Instead, please donate your money to one of these charities which mean a lot to me.
|
|
- [American Foundation for Suicide Prevention](https://afsp.org/)
|
|
- [Boys and Girls Club of America](https://www.bgca.org/ways-to-give)
|
|
|
|
# Getting Started
|
|
|
|
Would you like to host an instance? This section is for you.
|
|
|
|
## Docker
|
|
|
|
Using docker is the prefered way to host SafeTwitch
|
|
It can be easily setup in a few commands
|
|
|
|
### From codeberg's registry
|
|
|
|
First, clone the repository and cd into it
|
|
`git clone codeberg.org/dragongoose/safetwitch`
|
|
`cd safetwitch`
|
|
|
|
Now, change the environment variables in the docker-compose.yml
|
|
to fit your needs. An example is shown below
|
|
|
|
```yml
|
|
version: "3.9"
|
|
services:
|
|
frontend:
|
|
image: codeberg.org/dragongoose/safetwitch
|
|
ports:
|
|
- "8080:80"
|
|
environment:
|
|
- SAFETWITCH_BACKEND_DOMAIN=localhost:7000
|
|
- SAFETWITCH_INSTANCE_DOMAIN=localhost:80
|
|
- SAFETWITCH_HTTPS=false
|
|
backend:
|
|
image: codeberg.org/dragongoose/safetwitch-backend
|
|
ports:
|
|
- "7000:7000"
|
|
environment:
|
|
- PORT=7000
|
|
- URL=http://localhost:7000
|
|
```
|
|
|
|
Finally, run docker-compose
|
|
`docker-compose up`
|
|
|
|
### From source
|
|
|
|
First, clone the repository and cd into it
|
|
`git clone https://codeberg.org/dragongoose/safetwitch`
|
|
`cd safetwitch`
|
|
|
|
cd into the docker directory
|
|
`cd docker`
|
|
|
|
Modify the environment variables in the docker-compose.yml file to fit your needs
|
|
|
|
Now, run docker-compose in the docker folder
|
|
`docker-compose up`
|
|
|
|
## Without docker
|
|
|
|
This method isn't prefered, but there's nothing wrong with doing it.
|
|
|
|
### Setting up the frontend
|
|
|
|
First, let's clone the repository and cd into it
|
|
`git clone https://codeberg.org/dragongoose/safetwitch`
|
|
`cd safetwitch`
|
|
|
|
Now, we have to build the frontend.
|
|
First, set the environment variables in the .env file to your needs. Here's an example:
|
|
**This step is important, once the frontend is built, the env variables become hard coded**
|
|
|
|
```env
|
|
VITE_BACKEND_DOMAIN=localhost:7000
|
|
VITE_INSTANCE_DOMAIN=localhost:5173
|
|
VITE_HTTPS=false
|
|
```
|
|
|
|
Perfect, now we can build the frontend by running this command
|
|
`npm run build`
|
|
|
|
Once this finished, a new `dist` folder will appear. Put the contents of this folder into wherever your http server is. For the tutorial's sake, we'll use nginx.
|
|
|
|
`cd dist`
|
|
`mv ./* /var/www/html`
|
|
|
|
To have nginx allow for the SPA aspect of vue to work, we need to set the config option try_files.
|
|
|
|
```conf
|
|
events {}
|
|
http {
|
|
include mime.types;
|
|
|
|
server {
|
|
listen 80;
|
|
access_log off;
|
|
error_log off;
|
|
|
|
|
|
location / {
|
|
root /app;
|
|
index index.html;
|
|
try_files $uri $uri/ /index.html;
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
With that all set up, you can turn nginx on and start using SafeTwitch! (unless you need to setup the backend...)
|
|
|
|
### Setting up the backend
|
|
|
|
Setting up the backend is easier, first, let's clone it
|
|
`git clone https://codeberg.org/dragongoose/safetwitch-backend`
|
|
`cd safetwitch-backend`
|
|
|
|
Be sure to set the environment variables in the .env file. Here's an example:
|
|
|
|
```env
|
|
URL=http://localhost:7000
|
|
PORT:7000
|
|
```
|
|
|
|
Now we have to install dependencies
|
|
`npm i --production`
|
|
|
|
Finally, we can start the server
|
|
`node index`
|
|
|
|
## For instances
|
|
|
|
If you host a SafeTwitch instance and would like it to be listed in the readme, please make an issue or a pull request to add it in.
|
|
|