diff --git a/.eslintrc.js b/.eslintrc.js
index 6f5cb2dc..d7dcebbb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,26 +1,32 @@
-const a11yOff = Object.keys(require('eslint-plugin-jsx-a11y').rules)
- .reduce((acc, rule) => { acc[`jsx-a11y/${rule}`] = 'off'; return acc }, {})
+const a11yOff = Object.keys(require("eslint-plugin-jsx-a11y").rules).reduce(
+ (acc, rule) => {
+ acc[`jsx-a11y/${rule}`] = "off";
+ return acc;
+ },
+ {}
+);
module.exports = {
extends: [
"airbnb",
"airbnb/hooks",
"plugin:@typescript-eslint/recommended",
- "prettier",
+ "prettier"
],
settings: {
"import/resolver": {
- typescript: {},
- },
+ typescript: {}
+ }
},
+ ignorePatterns: ["public/*", "dist/*", "/*.js", "/*.ts"],
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.json",
- tsconfigRootDir: "./",
+ tsconfigRootDir: "./"
},
plugins: ["@typescript-eslint", "import"],
env: {
- browser: true,
+ browser: true
},
rules: {
"react/jsx-uses-react": "off",
@@ -43,16 +49,16 @@ module.exports = {
"no-await-in-loop": "off",
"react/jsx-filename-extension": [
"error",
- { extensions: [".js", ".tsx", ".jsx"] },
+ { extensions: [".js", ".tsx", ".jsx"] }
],
"import/extensions": [
"error",
"ignorePackages",
{
ts: "never",
- tsx: "never",
- },
+ tsx: "never"
+ }
],
...a11yOff
- },
+ }
};
diff --git a/.github/workflows/deploying.yml b/.github/workflows/deploying.yml
index 07a78f25..61f9ce0b 100644
--- a/.github/workflows/deploying.yml
+++ b/.github/workflows/deploying.yml
@@ -43,6 +43,11 @@ jobs:
name: production-files
path: ./dist
+ - name: Insert config
+ env:
+ DEPLOY_CONFIG: ${{ secrets.DEPLOY_CONFIG }}
+ run: cat "$DEPLOY_CONFIG" > ./dist/config.js
+
- name: Deploy to gh-pages
uses: peaceiris/actions-gh-pages@v3
with:
diff --git a/.gitignore b/.gitignore
index ae1ad7d8..24ee5531 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,7 +9,7 @@ node_modules
/coverage
# production
-/build
+/dist
# misc
.DS_Store
@@ -22,4 +22,7 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
-package-lock.json
\ No newline at end of file
+package-lock.json
+
+# config
+.env
diff --git a/README.md b/README.md
index 5b3e7d01..683c374e 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,13 @@ Features include:
- No BS: just a search bar and a video player
- No responsibility on the hoster, no databases or api's hosted by us, just a static site
-## Self-hosting / running locally
+## Self-hosting
+
+A simple guide has been written to assist in hosting your own instance of movie-web.
+
+Check it out here: [https://github.com/movie-web/movie-web/blob/dev/SELFHOSTING.md](https://github.com/movie-web/movie-web/blob/dev/SELFHOSTING.md)
+
+## Running locally for development
To run this project locally for contributing or testing, run the following commands:
note: must use yarn to install packages and run NodeJS 16
@@ -39,7 +45,7 @@ yarn start
To build production files, simply run `yarn build`.
-You can also deploy the Cloudflare Worker (in worker.js) and update the proxy URL constant in `/src/mw-constants.ts`.
+You'll need to deploy a cloudflare service worker as well. Check the [selfhosting guide](https://github.com/movie-web/movie-web/blob/dev/SELFHOSTING.md) on how to run the service worker. Afterwards you can make a `.env` file and put in the URL. (see `example.env` for an example)
Contributing -
diff --git a/SELFHOSTING.md b/SELFHOSTING.md
new file mode 100644
index 00000000..7137be1f
--- /dev/null
+++ b/SELFHOSTING.md
@@ -0,0 +1,38 @@
+# Selfhosting tutorial
+
+> **Note:** We do not provide support on how to selfhost, if you cant figure it out then tough luck. Please do not make Github issues or ask in our Discord server for support on how to selfhost.
+
+So you wanna selfhost. This app is made of two parts:
+ - The proxy
+ - The client
+
+## Hosting the proxy
+
+The proxy is made as a cloudflare worker, cloudflare has a generous free plan, so you don't need to pay anything unless you get hundreds of users.
+
+1. Create a cloudflare account at [https://dash.cloudflare.com](https://dash.cloudflare.com)
+2. Navigate to `Workers`.
+3. If it asks you, choose a subdomain
+4. If it asks for a workers plan, press "Continue with free"
+5. Create a new service with a name of your choice. Must be type `HTTP handler`
+6. On the service page, Click `Quick edit`
+7. Download the `worker.js` file from the latest release of the proxy: [https://github.com/movie-web/simple-proxy/releases/latest](https://github.com/movie-web/simple-proxy/releases/latest)
+8. Open the downloaded `worker.js` file in notepad, VScode or similar.
+9. Copy the text contents of the `worker.js` file.
+10. Paste the text contents into the edit screen of the cloudflare service worker.
+11. Click `Save and deploy` and confirm.
+
+Your proxy is now hosted on cloudflare. Note the url of your worker. you will need it later.
+
+## Hosting the client
+
+1. Download the file `movie-web.zip` from the latest release: [https://github.com/movie-web/movie-web/releases/latest](https://github.com/movie-web/movie-web/releases/latest)
+2. Extract the zip file so you can edit the files.
+3. Open `config.js` in notepad, VScode or similar.
+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
+
+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
new file mode 100644
index 00000000..5416f0f1
--- /dev/null
+++ b/example.env
@@ -0,0 +1,6 @@
+# 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=...
diff --git a/index.html b/index.html
index 822f74f3..fb20650b 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,7 @@
rel="stylesheet"
/>
+
movie-web
diff --git a/package.json b/package.json
index f264ca15..373f8020 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "movie-web",
- "version": "2.1.0",
+ "version": "2.1.1",
"private": true,
"homepage": "https://movie.squeezebox.dev",
"dependencies": {
diff --git a/public/config.js b/public/config.js
new file mode 100644
index 00000000..9ffc51ab
--- /dev/null
+++ b/public/config.js
@@ -0,0 +1,7 @@
+window.__CONFIG__ = {
+ // url must NOT end with a slash
+ VITE_CORS_PROXY_URL: "",
+
+ VITE_TMDB_API_KEY: "b030404650f279792a8d3287232358e3",
+ VITE_OMDB_API_KEY: "aa0937c0"
+};
diff --git a/src/components/layout/ErrorBoundary.tsx b/src/components/layout/ErrorBoundary.tsx
index 75aab1e1..b1803226 100644
--- a/src/components/layout/ErrorBoundary.tsx
+++ b/src/components/layout/ErrorBoundary.tsx
@@ -3,7 +3,7 @@ import { IconPatch } from "@/components/buttons/IconPatch";
import { Icons } from "@/components/Icon";
import { Link } from "@/components/text/Link";
import { Title } from "@/components/text/Title";
-import { DISCORD_LINK, GITHUB_LINK } from "@/mw_constants";
+import { conf } from "@/config";
interface ErrorBoundaryState {
hasError: boolean;
@@ -58,11 +58,11 @@ export class ErrorBoundary extends Component<