AniTrack Web

This project is the web view for anitrack, build on React and generated using create-react-app

Under the hood, the project uses redux and websocket to read and manipulate data. It also uses react-router that is programmed to follow the folder structure to make it easier to navigate.

There are some enviroment variables that are required to properly run the project. These variables can be seen on .env.example.

The server required to provide data is hosted in a different repo that can be accessed here.

Setting up your own server

TL;DR: Clone, install, setup .env, build, serve static folder and proxy /api

It is very easy to deploy a production build thanks to create-react-app. However, this guide will assume that you are familiar with setting up a server and skip through a lot of details.

First, we need to clone the project
```
git clone https://github.com/anitrack/anitrack-web.git
```
Alternatively, scroll to the top of this page. Click a green button called Clone or download. Then, click on Download ZIP
Navigate to the folder
```
cd anitrack-web
```
Install dependencies
```
npm install
# or
yarn
```
Setup .env file
```
cp .env.example .env
```
REACT_APP_BACKEND_SERVER is the location where anitrack is listening
Build the project
```
npm run build
```
This will create a folder called build which should be served as static file. Additionally, the domain should route requests to /api to anitrack server. This guide will use Nginx for that but you can use anything you like

Assuming you are running ubuntu, the following are configs that can be copied to nginx config file

nano /etc/nginx/sites-enabled/default

server{
listen 80;
server_name #DOMAIN#;

root #PROJECT_PATH#/build;
index index.html;
try_files $uri $uri/ /index.html;

location /api {
proxy_pass #BACKEND_SERVER#;

proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_ssl_session_reuse off;
proxy_set_header Host $http_host;
proxy_redirect off;
}
}

Remember to change #VARIABLE# with the correct value. An example of the values can be seen here:

DOMAIN=anitrack.uk
PROKECT_PATH=/var/www/anitrack-web
BACKEND_SERVER=http://localhost:4000

There are a few things that can be added to the config such as SSL, gzip, and extended cookie expiry. However, those are not within the scope of this guide.

If there's an issue while setting up the project, please file in a report.

anitrack-project / anitrack-web

readme

AniTrack Web

Setting up your own server