Initial draft

This commit is contained in:
qtchaos
2023-12-31 16:39:55 +02:00
parent baf2169306
commit 86cd905dc8
40 changed files with 2461 additions and 2909 deletions

View File

@@ -1,23 +1,28 @@
---
title: 'Configuration'
---
# Client Config Reference
The config for the movie-web can be provided in 2 different ways, depending on how you are hosting movie-web:
- If you are using a static web hoster (Such as Vercel, Netlify or Cloudflare pages), you can use [environment variables](#method-1-environment-variables).
- If you are hosting movie-web using shared hosting (Such as cPanel or FTP), please use [the config file](#method-2-config-file).
- If you are using a static web hoster (such as Vercel, Netlify or Cloudflare Pages), you can use [environment variables](#method-1-environment-variables).
- If you are hosting movie-web using shared hosting (such as cPanel or FTP), please use [the config file](#method-2-config-file).
Both methods can specify any of the keys listed in the [Shared Config](#config-reference-shared-config) section.
## Method 1 - Environment Variables
The movie-web client can be configured using environment variables **at build time**. You cannot use this method if hosting the pre-built `movie-web.zip` files!
Using environment variables to configure movie-web also allows configuration of some [environment variable specific keys](#config-reference-environment-variables-only).
## Method 2 - Config File
When using the pre-built `movie-web.zip`, you can set the configuration in the `config.js` file.
When using the pre-built `movie-web.zip`, you can set the configuration in the `config.js` file.
The `config.js` file contains a JavaScript object which must be set to the correct values:
```js
window.__CONFIG__ = {
// ... Config variables go here ...
@@ -26,121 +31,132 @@ window.__CONFIG__ = {
## Config Reference - Shared Config
### `VITE_TMDB_READ_API_KEY` - REQUIRED
### `VITE_TMDB_READ_API_KEY`
This is the **read** API key from TMDB to allow movie-web to search for media. [Get one by following our guide](/self-hosting/client#tmdb-api-key).
This is the **read** API key from TMDB to allow movie-web to search for media. [Get one by following our guide](../3.client/2.tmdb.md#getting-an-api-key).
::alert{type="warning"}
:icon{name="material-symbols:warning-rounded"} The example will not work for you, get your own
::alert{type="danger"}
**Required. The client will not work properly if this is not configured.**
::
Example: <code style="overflow-wrap: anywhere">VITE_TMDB_READ_API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c</code>
### `VITE_CORS_PROXY_URL` - REQUIRED
Example: `get-your-own-api-key`
This is where you put proxy URLS, you must have at least one. [Get one by following our guide](/self-hosting/proxy#cloudflare-workers).
Default: N/A
You can add multiple workers by separating them by a comma, they will be load balanced using round robin method on the client.
### `VITE_CORS_PROXY_URL` ⚠
Worker url entries must **not** end with a slash.
This is where you put proxy URLS, you must have at least one. [Get one by following our guide](../2.proxy/1.deploy.md#method-1---cloudflare-easy).
::alert{type="warning"}
:icon{name="material-symbols:warning-rounded"} The example will not work for you, get your own
You can add multiple Workers by separating them with a comma, they will be load balanced using round robin method on the client.
**Worker URL entries must not end with a slash.**
::alert{type="danger"}
**Required. The client will not work properly if this is not configured.**
::
Example: `VITE_CORS_PROXY_URL=https://worker1.workers.dev,https://worker2.workers.dev`
Example: `"https://example1.example.com,https://example2.example.com"`
Default: N/A
### `VITE_DMCA_EMAIL`
This is the DMCA email for on the DMCA page. If this config value is present, a new page will be made and linked in the footer, where it will mention how to handle dmca take-down requests. If the configuration value left empty, the page will not exist.
This is the DMCA email for on the DMCA page. If this config value is present, a new page will be made and linked in the footer, where it will mention how to handle DMCA take-down requests. If the configuration value is left empty, the page will not exist.
Example: `VITE_DMCA_EMAIL=dmca@example.com`
Example: `"dmca@example.com"`
Default: `""`
### `VITE_NORMAL_ROUTER`
The application has two routing modes: hash-router and history-router.
Hash router is that every page is linked in the hash like so: `https://example.com/#/browse`.
Hash router means that every page is linked with a hash like so: `https://example.com/#/browse`.
History router does routing without a hash like so: `https://example.com/browse`, this looks a lot nicer, but it requires that your hosting environment supports Single-Page-Application (SPA) redirects. If you don't know what that means, don't enable this.
History router does routing without a hash like so: `https://example.com/browse`, this looks a lot nicer, but it requires that your hosting environment supports Single-Page-Application (SPA) redirects (Vercel supports this feature). If you don't know what that means, don't enable this.
Setting this configuration value to `true` will enable the history-router.
Example: `VITE_NORMAL_ROUTER=true`
Example: `true`
Default: `false`
### `VITE_BACKEND_URL`
- Type: `string`
- Default: `"https://backend.movie-web.app"`
- Example: `"https://backend.example.com"`
This is the URL for the movie-web backend server which handles cross-device syncing.
The backend server can be found at https://github.com/movie-web/backend and is offered as a [Docker](https://docs.docker.com/get-started/overview/) image for deployment.
The backend server can be found at https://github.com/movie-web/backend and is offered as a [Docker](https://docs.docker.com/get-started/overview/){target="\_blank"} image for deployment.
Backend url must **not** end with a slash.
Example: `VITE_BACKEND_URL=https://backend.example.com`
Default: `https://backend.movie-web.app`
Backend URL must **not** end with a slash.
### `VITE_DISALLOWED_IDS`
In the unfortunate event that you're been sent a DMCA take down notice. You will need to somehow disable some pages. This configuration key will allow you to disable specific ids.
- Type: `string`
- Default: `""`
- Example: `"series-123,movie-456"`
In the unfortunate event that you've been sent a DMCA take down notice, you'll need to disable some pages. This configuration key will allow you to disable specific ids.
For shows, it needs to be in this format: `series-<TMDB_ID>`. For movies the format is this: `movie-<TMDB_ID>`.
The list is comma separated, you can add as many as needed.
Example: `VITE_DISALLOWED_IDS=series-123,movie-456`
Default: `""`
### `VITE_CDN_REPLACEMENTS`
Sometimes you want to proxy a CDN. This is how you can easily replace a cdn url with your own.
- Type: `string`
- Default: `""`
- Example: `"google.com:exampe.com,123movies.com:flixhq.to"`
Sometimes you want to proxy a CDN. This is how you can easily replace a CDN URL with your own.
The format is `<beforeA>:<afterA>,<beforeB>:<afterB>,...`
Example: `VITE_CDN_REPLACEMENTS=google.com:exampe.com,123movies.com:flixhq.to`
Default: `""`
### `VITE_TURNSTILE_KEY`
The turnstile key for cloudflare captchas. It's used to authenticate request to proxy workers (or providers api).
- Type: `string`
- Default: `""`
The proxy workers will need to be configured to accept these captcha tokens, otherwise it has no effect for security.
The [Turnstile key](https://dash.cloudflare.com/sign-up?to=/:account/turnstile){target="\_blank"} for Cloudflare captchas. It's used to authenticate requests to proxy workers (or providers API).
Example: `""`
[The proxy workers will need to be configured to accept these captcha tokens](../2.proxy/2.configuration.md#turnstile_secret), otherwise it has no effect for security.
## Config reference - Environment Variables Only
::alert{type="danger"}
:icon{name="material-symbols:warning-rounded"} These configuration keys are specific to environment variables, they **only** work as environment variables **set at build time**.
::
### `VITE_PWA_ENABLED`
**This key can only be configured through environment variables.**
- Type: `boolean`
- Default: `false`
Set to `true` if you want to output a PWA application. Set to `false` or omit to get a normal web application.
A PWA web application can be installed as an application to your phone or desktop computer, but can be tricky to manage and comes with a few footguns.
Make sure you know what you're doing before enabling this, it **cannot be disabled** after you've set it up once.
Example: `VITE_PWA_ENABLED=no`
::alert{type="warning"}
Make sure you know what you're doing before enabling this, it **cannot be disabled** after you've set it up once.
::
### `VITE_APP_DOMAIN`
**This key can only be configured through environment variables.**
The domain where the app lives. Only required when having OpenSearch enabled.
- Type: `string`
- Default: `""`
- Example: `"https://movie-web.app"`
The value must include the protocol (http/https) but must **not** end with a slash.
The domain where the app lives. Only required when having the [`VITE_OPENSEARCH_ENABLED`](#vite_opensearch_enabled) option enabled.
Example: `VITE_APP_DOMAIN=https://movie-web.app`
The value must include the protocol (HTTP/HTTPS) but must **not** end with a slash.
### `VITE_OPENSEARCH_ENABLED`
**This key can only be configured through environment variables.**
Whether to enable OpenSearch. (the feature that allows a user to add a search engine to their browser). A
when enabling you **must** also set `VITE_APP_DOMAIN`.
- Type: `boolean`
- Default: `false`
`VITE_OPENSEARCH_ENABLED` must be set to `true` to be enabled. Anything else will be treated as turned off, it's case sensitive so `True` will also be disabled.
Example: `VITE_OPENSEARCH_ENABLED=true`
Whether to enable [OpenSearch](https://developer.mozilla.org/en-US/docs/Web/OpenSearch){target="\_blank"}, this allows a user to add a search engine to their browser. When enabling you **must** also set [`VITE_APP_DOMAIN`](#vite_app_domain).
::alert{type="warning"}
:icon{name="material-symbols:warning-rounded"} This field is case sensitive, make sure you use the correct casing.
::