.vscode | ||
docker | ||
public | ||
src | ||
.dockerignore | ||
.env | ||
.eslintrc.cjs | ||
.gitignore | ||
.prettierrc.json | ||
docker-compose.yml | ||
env.d.ts | ||
index.html | ||
nginx.conf | ||
package-lock.json | ||
package.json | ||
postcss.config.js | ||
README.md | ||
substitute_environment_variables.sh | ||
tailwind.config.js | ||
tsconfig.json | ||
tsconfig.node.json | ||
vite.config.ts |
SafeTwitch
SafeTwitch is a privacy respecting frontend for 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.
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
- No connection to twitch/amazon
- Lightweight on server and client
- No Ads or tracking
- No outside connections, only connection is the instance
- Uses Vue for a speedy experience
- No logs
- Much smaller pages compared to Twitch (<600kb compared to >8.2mb)
- Follow streamers locally to have a more personalized feel
- Infinite scrolling
Technical features
- Public API
- No official APIs are used
- No rate limiting
- Uses a custom Twitch webscraper
Donations
Donations towards development are not accepted. I really thank you for feeling the need to donate, however the best things in life should be free.
Instead, please donate your money to one of these charities which mean a lot to me.
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
version: "3.9"
services:
frontend:
image: codeberg.org/dragongoose/safetwitch
ports:
- "8080:80"
environment:
- VITE_BACKEND_DOMAIN=localhost:7000
- VITE_INSTANCE_DOMAIN=localhost:80
- VITE_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
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.
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:
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.