feat!: add BACKEND_URL environment variable to support for custom bac…

…kend URL (#518)

* feat!: add `BACKEND_URL` environment variable to support for custom backend url

Currently frontend assumes backend url to be 127.0.0.1 (i.e in same network interface / container). This PR solves that issue.

* docs: update readme.md to reflect latest changes

README.md

@@ -21,19 +21,20 @@
 
 Services currently supported:
 
-| Service              | Supported |
-|----------------------|-----------|
-| Real Debrid          | ✅         |
-| Plex                 | ✅         |
-| Overseerr            | ✅         |
-| Mdblist              | ✅         |
-| Trakt                | ✅         |
-| Jackett              | ✅         |
-| Plex Watchlist RSS   | ✅         |
-| Torrentio            | ✅         |
-| Orionoid             | ✅         |
-| Jackett              | ✅         |
-| Listrr               | ✅         |
+| Service            | Supported |
+| ------------------ | --------- |
+| Real Debrid        | ✅        |
+| Plex               | ✅        |
+| Overseerr          | ✅        |
+| Mdblist            | ✅        |
+| Trakt              | ✅        |
+| Jackett            | ✅        |
+| Plex Watchlist RSS | ✅        |
+| Torrentio          | ✅        |
+| Orionoid           | ✅        |
+| Jackett            | ✅        |
+| Listrr             | ✅        |
+
 | and more to come!
 
 Check out out [Project Board](/~https://github.com/users/dreulavelle/projects/2) to stay informed!
@@ -46,34 +47,34 @@ We are constantly adding features and improvements as we go along and squashing
 
 ## Table of Contents
 
-- [Table of Contents](#table-of-contents)
-- [ElfHosted](#elfhosted)
-- [Self Hosted](#self-hosted)
-  - [Docker Compose](#docker-compose)
-    - [What is ORIGIN ?](#what-is-origin-)
-  - [Running outside of Docker](#running-outside-of-docker)
-    - [First terminal:](#first-terminal)
-    - [Second terminal:](#second-terminal)
-  - [Symlinking settings](#symlinking-settings)
-    - [Example:](#example)
-- [Development](#development)
-  - [Development without `make`](#development-without-make)
-- [Contributing](#contributing)
-- [License](#license)
+-   [Table of Contents](#table-of-contents)
+-   [ElfHosted](#elfhosted)
+-   [Self Hosted](#self-hosted)
+    -   [Docker Compose](#docker-compose)
+        -   [What is ORIGIN ?](#what-is-origin-)
+    -   [Running outside of Docker](#running-outside-of-docker)
+        -   [First terminal:](#first-terminal)
+        -   [Second terminal:](#second-terminal)
+    -   [Symlinking settings](#symlinking-settings)
+        -   [Example:](#example)
+-   [Development](#development)
+    -   [Development without `make`](#development-without-make)
+-   [Contributing](#contributing)
+-   [License](#license)
 
 ---
 
 ## ElfHosted
 
-[ElfHosted](https://elfhosted.com) is a geeky [open-source](https://elfhosted.com/open/) PaaS which provides all the "plumbing" (*hosting, security, updates, etc*) for your self-hosted apps. 
+[ElfHosted](https://elfhosted.com) is a geeky [open-source](https://elfhosted.com/open/) PaaS which provides all the "plumbing" (_hosting, security, updates, etc_) for your self-hosted apps.
 
 > [!IMPORTANT]
 > Riven is a top-tier app in the [ElfHosted app catalogue](https://elfhosted.com/apps/). 30% of your subscription goes to Riven developers, and the remainder offsets [infrastructure costs](https://elfhosted.com/open/pricing/).
 
-> [!TIP] 
+> [!TIP]
 > New accounts get $10 free credit, enough for a week's free trial of the [Riven / Plex Infinite Streaming](https://store.elfhosted.com/product/infinite-plex-riven-streaming-bundle) bundle!
 
-(*[ElfHosted Discord](https://discord.elfhosted.com)*)
+(_[ElfHosted Discord](https://discord.elfhosted.com)_)
 
 ## Self Hosted
 
@@ -90,13 +91,8 @@ services:
         environment:
             PUID: "1000"
             PGID: "1000"
-            ORIGIN: "http://localhost:3000" # read below for more info
-            RIVEN_PLEX_URL: "http://plex:32400"
-            RIVEN_PLEX_TOKEN: "your_plex_token"
-            RIVEN_PLEX_RCLONE_PATH: "/mnt/zurg/__all__"
-            RIVEN_PLEX_LIBRARY_PATH: "/mnt/library"
-            RIVEN_DOWNLOADERS_REAL_DEBRID_ENABLED: "true"
-            RIVEN_DOWNLOADERS_REAL_DEBRID_API_KEY: "your_real_debrid_api_key"
+            ORIGIN: "http://localhost:3000" # IMP: read below to avoid CORS issues
+            BACKEND_URL: http://127.0.0.1:8080 # optional
         ports:
             - "3000:3000"
         volumes:
@@ -106,6 +102,9 @@ services:
 
 Then run `docker compose up -d` to start the container in the background. You can then access the web interface at `http://localhost:3000` or whatever port and origin you set in the `docker-compose.yml` file.
 
+> [!TIP]
+> On first run, Riven creates a `settings.json` file in the `data` directory. You can edit the settings from frontend, or manually edit the file and restart the container or use `.env` or docker-compose environment variables to set the settings (see `.env.example` for reference).
+
 #### What is ORIGIN ?
 
 `ORIGIN` is the URL of the frontend on which you will access it from anywhere. If you are hosting Riven on a vps with IP address `123.45.67.890` then you will need to set the `ORIGIN` to `http://123.45.67.890:3000` (no trailing slash). Similarly, if using a domain name, you will need to set the `ORIGIN` to `http://riven.example.com:3000` (no trailing slash). If you change the port in the `docker-compose.yml` file, you will need to change it in the `ORIGIN` as well.
@@ -126,7 +125,7 @@ and open two terminals in the root of the project and run the following commands
 cd frontend
 npm install
 npm run build
-ORIGIN=http://localhost:3000 node build
+ORIGIN=http://localhost:3000 BACKEND_URL=http://127.0.0.1 node build
 ```
 
 Read above for more info on `ORIGIN`.
@@ -154,10 +153,10 @@ poetry run python backend/main.py
     }
 ```
 
-Plex libraries that are currently required to have sections: 
+Plex libraries that are currently required to have sections:
 
-| Type   | Categories       |
-|--------|------------------|
+| Type   | Categories               |
+| ------ | ------------------------ |
 | Movies | `movies`, `anime_movies` |
 | Shows  | `shows`, `anime_shows`   |
 
@@ -173,86 +172,94 @@ Welcome to the development section! Here, you'll find all the necessary steps to
 ### Prerequisites
 
 Ensure you have the following installed on your system:
-- **Node.js** (v18.13+)
-- **Python** (3.10+)
-- **Poetry** (for Python dependency management)
-- **Docker** (optional, for containerized development)
+
+-   **Node.js** (v18.13+)
+-   **Python** (3.10+)
+-   **Poetry** (for Python dependency management)
+-   **Docker** (optional, for containerized development)
 
 ### Initial Setup
 
 1. **Clone the Repository:**
-   ```sh
-   git clone /~https://github.com/rivenmedia/riven.git && cd riven
-   ```
+
+    ```sh
+    git clone /~https://github.com/rivenmedia/riven.git && cd riven
+    ```
 
 2. **Install Backend Dependencies:**
-   ```sh
-   pip install poetry
-   poetry install
-   ```
+
+    ```sh
+    pip install poetry
+    poetry install
+    ```
 
 3. **Install Frontend Dependencies:**
-   ```sh
-   cd frontend
-   npm install
-   cd ..
-   ```
+    ```sh
+    cd frontend
+    npm install
+    cd ..
+    ```
 
 ### Using `make` for Development
 
 We provide a `Makefile` to simplify common development tasks. Here are some useful commands:
 
-- **Initialize the Project:**
-  ```sh
-  make
-  ```
+-   **Initialize the Project:**
 
-- **Start the Development Environment:**
-  This command stops any previous containers, removes old images, and rebuilds the image using cached layers. Any changes in the code will trigger a rebuild.
-  ```sh
-  make start
-  ```
+    ```sh
+    make
+    ```
 
-- **Restart the Container:**
-  ```sh
-  make restart
-  ```
+-   **Start the Development Environment:**
+    This command stops any previous containers, removes old images, and rebuilds the image using cached layers. Any changes in the code will trigger a rebuild.
 
-- **View Logs:**
-  ```sh
-  make logs
-  ```
+    ```sh
+    make start
+    ```
+
+-   **Restart the Container:**
+
+    ```sh
+    make restart
+    ```
+
+-   **View Logs:**
+    ```sh
+    make logs
+    ```
 
 ### Development without `make`
 
 If you prefer not to use `make` and Docker, you can manually set up the development environment with the following steps:
 
 1. **Start the Backend:**
-   ```sh
-   poetry run python backend/main.py
-   ```
+
+    ```sh
+    poetry run python backend/main.py
+    ```
 
 2. **Start the Frontend:**
-   ```sh
-   cd frontend
-   npm run dev
-   ```
+    ```sh
+    cd frontend
+    npm run dev
+    ```
 
 ### Additional Tips
 
-- **Environment Variables:**
-  Ensure you set the `ORIGIN` environment variable to the URL where the frontend will be accessible. For example:
-  ```sh
-  export ORIGIN=http://localhost:3000
-  ```
+-   **Environment Variables:**
+    Ensure you set the `ORIGIN` environment variable to the URL where the frontend will be accessible. For example:
+
+    ```sh
+    export ORIGIN=http://localhost:3000
+    ```
 
-- **Code Formatting:**
-  We use `Black` for Python and `Prettier` for JavaScript. Make sure to format your code before submitting any changes.
+-   **Code Formatting:**
+    We use `Black` for Python and `Prettier` for JavaScript. Make sure to format your code before submitting any changes.
 
-- **Running Tests:**
-  ```sh
-  poetry run pytest
-  ```
+-   **Running Tests:**
+    ```sh
+    poetry run pytest
+    ```
 
 By following these guidelines, you'll be able to set up your development environment smoothly and start contributing to the project. Happy coding!
 
@@ -269,9 +276,9 @@ We welcome contributions from the community! To ensure a smooth collaboration, p
 
 ### Code Formatting
 
-- **Backend**: We use [Black](https://black.readthedocs.io/en/stable/) for code formatting. Run `black` on your code before submitting.
-- **Frontend**: We use [Prettier](https://prettier.io/) for code formatting. Run `prettier` on your code before submitting.
-- **Line Endings**: Use CRLF line endings unless the file is a shell script or another format that requires LF line endings.
+-   **Backend**: We use [Black](https://black.readthedocs.io/en/stable/) for code formatting. Run `black` on your code before submitting.
+-   **Frontend**: We use [Prettier](https://prettier.io/) for code formatting. Run `prettier` on your code before submitting.
+-   **Line Endings**: Use CRLF line endings unless the file is a shell script or another format that requires LF line endings.
 
 ### Dependency Management
 
@@ -285,15 +292,15 @@ We use [Poetry](https://python-poetry.org/) for managing dependencies. Poetry si
 
 #### Adding or Updating Dependencies
 
-- **Add a Dependency**: Use `poetry add <package-name>` to add a new dependency.
-- **Update a Dependency**: Use `poetry update <package-name>` to update an existing dependency.
+-   **Add a Dependency**: Use `poetry add <package-name>` to add a new dependency.
+-   **Update a Dependency**: Use `poetry update <package-name>` to update an existing dependency.
 
 ### Running Tests and Linters
 
 Before submitting a pull request, ensure your changes are compatible with the project's dependencies and coding standards. Use the following commands to run tests and linters:
 
-- **Run Tests**: `poetry run pytest`
-- **Run Linters**: `poetry run ruff check backend` and `poetry run isort --check-only backend`
+-   **Run Tests**: `poetry run pytest`
+-   **Run Linters**: `poetry run ruff check backend` and `poetry run isort --check-only backend`
 
 By following these guidelines, you help us maintain a high-quality codebase and streamline the review process. Thank you for contributing!
 

docker-compose-dev.yml

@@ -13,6 +13,7 @@ services:
       - PUID=1000
       - PGID=1000
       - ORIGIN=${RIVEN_ORIGIN:-http://localhost:8080}
+      - BACKEND_URL=${RIVEN_BACKEND_URL:-http://
       - TZ=UTC
     volumes:
       - ./data:/riven/data

docker-compose.yml

@@ -8,6 +8,7 @@ services:
       - PUID=1000
       - PGID=1000
       - ORIGIN=http://localhost:3000
+      - BACKEND_URL=http://127.0.0.1:8080
       - TZ=America/New_York
     volumes:
       - ./data:/riven/data

entrypoint.sh

@@ -68,6 +68,7 @@ set -x PATH $PATH /app/.venv/bin
 
 su -m $USERNAME -c "poetry config virtualenvs.create false"
 set -q ORIGIN; or set ORIGIN "http://localhost:3000"
+set -q BACKEND_URL; or set BACKEND_URL "http://127.0.0.1:8080"
 
 echo "Container Initialization complete."
 
@@ -83,4 +84,4 @@ set backend_pid (jobs -p %1)
 
 # Start the frontend
 echo "Starting frontend..."
-exec su -m $USERNAME -c "fish -c 'ORIGIN=$ORIGIN node /riven/frontend/build'"
+exec su -m $USERNAME -c "fish -c 'ORIGIN=$ORIGIN BACKEND_URL=$BACKEND_URL node /riven/frontend/build'"

frontend/src/hooks.server.ts

@@ -1,10 +1,11 @@
 import type { Handle } from '@sveltejs/kit';
 import { redirect, error } from '@sveltejs/kit';
 import { sequence } from '@sveltejs/kit/hooks';
+import { BACKEND_URL } from '$env/static/private';
 
 const onboarding: Handle = async ({ event, resolve }) => {
 	if (!event.url.pathname.startsWith('/onboarding') && event.request.method === 'GET') {
-		const res = await event.fetch('http://127.0.0.1:8080/services');
+		const res = await event.fetch(`${BACKEND_URL}/services`);
 		const data = await res.json();
 		if (!data.success || !data.data) {
 			error(500, 'API Error');

frontend/src/lib/components/header.svelte

@@ -36,7 +36,7 @@
 	function toggleNavbar() {
 		showMenu.update((v) => !v);
 	}
-	
+
 	let applyBackdropBlur = () => {};
 
 	onMount(async () => {

frontend/src/lib/forms/helpers.ts

@@ -1,10 +1,11 @@
 import { type SuperValidated, type Infer } from 'sveltekit-superforms';
+import { BACKEND_URL } from '$env/static/private';
 
 import { z } from 'zod';
 
 // TODO: Add toCheck
 export async function setSettings(fetch: any, toSet: any) {
-	const settings = await fetch('http://127.0.0.1:8080/settings/set', {
+	const settings = await fetch(`${BACKEND_URL}/settings/set`, {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json'
@@ -19,7 +20,7 @@ export async function setSettings(fetch: any, toSet: any) {
 }
 
 export async function saveSettings(fetch: any) {
-	const data = await fetch('http://127.0.0.1:8080/settings/save', {
+	const data = await fetch(`${BACKEND_URL}/settings/save`, {
 		method: 'POST'
 	});
 	const response = await data.json();
@@ -30,7 +31,7 @@ export async function saveSettings(fetch: any) {
 }
 
 export async function loadSettings(fetch: any) {
-	const data = await fetch('http://127.0.0.1:8080/settings/load', {
+	const data = await fetch(`${BACKEND_URL}/settings/load`, {
 		method: 'GET'
 	});
 	const response = await data.json();