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

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

::alert{type="warning"}
:icon{name="material-symbols:warning-rounded"} The example will not work for you, get your own
::
Example: <code style="overflow-wrap: anywhere">VITE_TMDB_READ_API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c</code>

### `VITE_CORS_PROXY_URL` - REQUIRED

This is where you put proxy URLS, you must have at least one. [Get one by following our guide](/self-hosting/proxy#cloudflare-workers).

You can add multiple workers by separating them by 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="warning"}
:icon{name="material-symbols:warning-rounded"} The example will not work for you, get your own
::
Example: `VITE_CORS_PROXY_URL=https://worker1.workers.dev,https://worker2.workers.dev`

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

Example: `VITE_DMCA_EMAIL=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`.

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.

Setting this configuration value to `true` will enable the history-router.

Example: `VITE_NORMAL_ROUTER=true`

Default: `false`

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

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

Example: `VITE_BACKEND_URL=https://backend.example.com`

Default: `https://backend.movie-web.app`

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

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

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

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`

### `VITE_APP_DOMAIN`
**This key can only be configured through environment variables.**

The domain where the app lives. Only required when having OpenSearch enabled.

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

Example: `VITE_APP_DOMAIN=https://movie-web.app`

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

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