From fcf8a9e755ecc3bdc91d5d3c4dd4caee8ac05261 Mon Sep 17 00:00:00 2001 From: mrjvs Date: Fri, 23 Jun 2023 21:58:33 +0200 Subject: [PATCH] update configuration documentation --- SELFHOSTING.md | 3 ++- example.env | 5 +---- public/config.js | 3 +-- src/backend/metadata/tmdb.ts | 2 +- src/index.tsx | 3 ++- src/setup/config.ts | 43 ++++++++++++++++++------------------ 6 files changed, 28 insertions(+), 31 deletions(-) diff --git a/SELFHOSTING.md b/SELFHOSTING.md index 7137be1f..926322d6 100644 --- a/SELFHOSTING.md +++ b/SELFHOSTING.md @@ -32,7 +32,8 @@ Your proxy is now hosted on cloudflare. Note the url of your worker. you will ne 4. Put your cloudflare proxy URL inbetween the double qoutes of `VITE_CORS_PROXY_URL: "",`. Make sure to not have a slash at the end of your URL. Example (THIS IS MINE, IT WONT WORK FOR YOU): `VITE_CORS_PROXY_URL: "https://test-proxy.test.workers.dev",` -5. Save the file +5. Put your TMDB read access token inside the quotes of `VITE_TMDB_API_KEY: "",`. You can generate it for free at [https://www.themoviedb.org/settings/api](https://www.themoviedb.org/settings/api). +6. Save the file Your client has been prepared, you can now host it on any webhost. It doesn't require php, its just a standard static page. diff --git a/example.env b/example.env index 5416f0f1..d191d741 100644 --- a/example.env +++ b/example.env @@ -1,6 +1,3 @@ # make sure the cors proxy url does NOT have a slash at the end VITE_CORS_PROXY_URL=... - -# the keys below are optional - defaults are provided -VITE_TMDB_API_KEY=... -VITE_OMDB_API_KEY=... +VITE_TMDB_READ_API_KEY=... diff --git a/public/config.js b/public/config.js index b69f60eb..abd72baf 100644 --- a/public/config.js +++ b/public/config.js @@ -1,6 +1,5 @@ window.__CONFIG__ = { // url must NOT end with a slash VITE_CORS_PROXY_URL: "", - VITE_TMDB_API_KEY: "b030404650f279792a8d3287232358e3", - VITE_OMDB_API_KEY: "aa0937c0", + TMDB_READ_API_KEY: "" }; diff --git a/src/backend/metadata/tmdb.ts b/src/backend/metadata/tmdb.ts index 1c442028..9b38d995 100644 --- a/src/backend/metadata/tmdb.ts +++ b/src/backend/metadata/tmdb.ts @@ -99,7 +99,7 @@ const baseURL = "https://api.themoviedb.org/3"; const headers = { accept: "application/json", - Authorization: `Bearer ${conf().TMDB_API_KEY}`, + Authorization: `Bearer ${conf().TMDB_READ_API_KEY}`, }; async function get(url: string, params?: object): Promise { diff --git a/src/index.tsx b/src/index.tsx index 36b1fb14..839d7a90 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,7 +7,7 @@ import { registerSW } from "virtual:pwa-register"; import { ErrorBoundary } from "@/components/layout/ErrorBoundary"; import App from "@/setup/App"; -import { conf } from "@/setup/config"; +import { assertConfig, conf } from "@/setup/config"; import i18n from "@/setup/i18n"; import "@/setup/ga"; @@ -30,6 +30,7 @@ registerSW({ }); const LazyLoadedApp = React.lazy(async () => { + await assertConfig(); await initializeStores(); i18n.changeLanguage(SettingsStore.get().language ?? "en"); return { diff --git a/src/setup/config.ts b/src/setup/config.ts index f1db01da..a7d9067b 100644 --- a/src/setup/config.ts +++ b/src/setup/config.ts @@ -4,8 +4,7 @@ interface Config { APP_VERSION: string; GITHUB_LINK: string; DISCORD_LINK: string; - OMDB_API_KEY: string; - TMDB_API_KEY: string; + TMDB_READ_API_KEY: string; CORS_PROXY_URL: string; NORMAL_ROUTER: boolean; } @@ -14,15 +13,13 @@ export interface RuntimeConfig { APP_VERSION: string; GITHUB_LINK: string; DISCORD_LINK: string; - OMDB_API_KEY: string; - TMDB_API_KEY: string; + TMDB_READ_API_KEY: string; NORMAL_ROUTER: boolean; PROXY_URLS: string[]; } const env: Record = { - OMDB_API_KEY: import.meta.env.VITE_OMDB_API_KEY, - TMDB_API_KEY: import.meta.env.VITE_TMDB_API_KEY, + TMDB_READ_API_KEY: import.meta.env.VITE_TMDB_READ_API_KEY, APP_VERSION: undefined, GITHUB_LINK: undefined, DISCORD_LINK: undefined, @@ -30,25 +27,28 @@ const env: Record = { NORMAL_ROUTER: import.meta.env.VITE_NORMAL_ROUTER, }; -const alerts = [] as string[]; - // loads from different locations, in order: environment (VITE_{KEY}), window (public/config.js) -function getKey(key: keyof Config, defaultString?: string): string { +function getKeyValue(key: keyof Config): string | undefined { let windowValue = (window as any)?.__CONFIG__?.[`VITE_${key}`]; if (windowValue !== undefined && windowValue.length === 0) windowValue = undefined; - const value = env[key] ?? windowValue ?? undefined; - if (value === undefined) { - if (defaultString) return defaultString; - if (!alerts.includes(key)) { - // eslint-disable-next-line no-alert - window.alert(`Misconfigured instance, missing key: ${key}`); - alerts.push(key); - } - return ""; - } + return env[key] ?? windowValue ?? undefined; +} - return value; +function getKey(key: keyof Config, defaultString?: string): string { + return getKeyValue(key) ?? defaultString ?? ""; +} + +export function assertConfig() { + const keys: Array = ["TMDB_READ_API_KEY", "CORS_PROXY_URL"]; + const values = keys.map((key) => { + const val = getKeyValue(key); + if (val) return val; + // eslint-disable-next-line no-alert + window.alert(`Misconfigured instance, missing key: ${key}`); + return val; + }); + if (values.includes(undefined)) throw new Error("Misconfigured instance"); } export function conf(): RuntimeConfig { @@ -56,8 +56,7 @@ export function conf(): RuntimeConfig { APP_VERSION, GITHUB_LINK, DISCORD_LINK, - OMDB_API_KEY: getKey("OMDB_API_KEY"), - TMDB_API_KEY: getKey("TMDB_API_KEY"), + TMDB_READ_API_KEY: getKey("TMDB_READ_API_KEY"), PROXY_URLS: getKey("CORS_PROXY_URL") .split(",") .map((v) => v.trim()),