docs/content/3.client/3.configuration.md

---
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).

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.

The `config.js` file contains a JavaScript object which must be set to the correct values:

```js
window.__CONFIG__ = {
  // ... Config variables go here ...
};
```

## Config Reference - Shared Config

### `VITE_TMDB_READ_API_KEY` ⚠

- Type: `string`
- Default: `""`

This is the **read** API key from TMDB to allow movie-web to search for media. [Get one by following our guide](/client/tmdb).

::alert{type="danger"}
**Required. The client will not work properly if this is not configured.**
::

### `VITE_CORS_PROXY_URL` ⚠

- Type: `string`
- Default: `""`
- Example: `"https://example1.example.com,https://example2.example.com"`

This is where you put proxy URLS, you must have at least one. [Get one by following our guide](/proxy/deploy).

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.**
::

### `VITE_DMCA_EMAIL`

- Type: `string`
- Default: `""`
- Example: `"dmca@example.com"`

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.

### `VITE_NORMAL_ROUTER`

- Type: `boolean`
- Default: `false`

The application has two routing modes: hash-router and history-router.
Hash router means that every page is linked with a hash like so: <code style="overflow-wrap: anywhere">https://example.com/#/browse</code>.

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.

### `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/){target="\_blank"} image for deployment.

Backend URL must **not** end with a slash.

### `VITE_HAS_ONBOARDING`

- Type: `boolean`
- Default: `false`

If you want your users to be prompted with an onboarding screen before they start watching, enable this.

### `VITE_ONBOARDING_EXTENSION_INSTALL_LINK`

- Type: `string`
- Default: `""`
- Example: `"https://google.com"`

When onboarding is enabled using `VITE_HAS_ONBOARDING`. This link will be used to link the proper extension to install.

If omitted, this will still show the extension onboarding screen, just without an install link for the extension.

### `VITE_ONBOARDING_PROXY_INSTALL_LINK`

- Type: `string`
- Default: `""`
- Example: `"https://google.com"`

When onboarding is enabled using `VITE_HAS_ONBOARDING`. This link will be used to link the user to resources to host a custom proxy.

If omitted, this will still show the proxy onboarding screen, just without an documentation link for the proxy.

### `VITE_DISALLOWED_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.

### `VITE_CDN_REPLACEMENTS`

- Type: `string`
- Default: `""`
- Example: <code style="overflow-wrap: anywhere">"google.com:example.com,123movies.com:flixhq.to"</code>

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>,...`

### `VITE_TURNSTILE_KEY`

- Type: `string`
- Default: `""`

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).

[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`

- 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.

::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`

- Type: `string`
- Default: `""`
- Example: `"https://movie-web.app"`

The domain where the app lives. Only required when having the [`VITE_OPENSEARCH_ENABLED`](#vite_opensearch_enabled) option enabled.

The value must include the protocol (HTTP/HTTPS) but must **not** end with a slash.

### `VITE_OPENSEARCH_ENABLED`

- Type: `boolean`
- Default: `false`

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.
::