Replaced config w/ dotenv. Hydrate docker nginx using env. Updated readme

This commit is contained in:
2022-08-14 19:49:48 +02:00
parent cbf400c118
commit 3b98faeddd
13 changed files with 123 additions and 79 deletions

4
.env.example Normal file
View File

@@ -0,0 +1,4 @@
SEASONED_API=
ELASTIC=
ELASTIC_INDEX=shows,movies
SEASONED_DOMAIN=

1
.gitignore vendored
View File

@@ -1,5 +1,6 @@
# config file - copy config.json.example
src/config.json
.env
# Build directory
dist/

View File

@@ -1,7 +1,10 @@
FROM nginx:1.23.1
COPY public /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf.template
COPY docker-entrypoint.sh /docker-entrypoint.d/05-docker-entrypoint.sh
RUN chmod +x /docker-entrypoint.d/05-docker-entrypoint.sh
EXPOSE 5000

View File

@@ -1,45 +1,72 @@
# The Movie Database App
# Seasoned Request
A Vue.js project.
Seasoned request is frontend vue application for searching, requesting and viewing account watch activity.
![](https://github.com/dmtrbrl/tmdb-app/blob/master/docs/demo.gif)
## Demo
[TMDB Vue App](https://tmdb-vue-app.herokuapp.com/)
## Config setup
Set seasonedShows api endpoint and/or elastic.
- SeasonedShows [can be found here](https://github.com/kevinmidboe/seasonedshows) and is the matching backend to fetch tmdb search results, tmdb lists, request new content, check plex status and lets owner search and add torrents to download.
- Elastic is optional and can be used for a instant search feature for all movies and shows registered in tmdb.
```json
{
"SEASONED_URL": "http://localhost:31459/api",
"ELASTIC_URL": "http://localhost:9200"
}
```bash
# make copy of example environment file
cp .env.example .env
```
*Set ELASTIC_URL to undefined or false to disable*
## Build Setup
```bash
# .env sane default values
SEASONED_API=
ELASTIC=
ELASTIC_INDEX=shows,movies
SEASONED_DOMAIN=
```
``` bash
- Leave SEASONED_API empty to request `/api` from same origin and proxy passed by nginx, set if hosting [seasonedShows backend api](https://github.com/KevinMidboe/seasonedShows) locally.
- Elastic is optional and can be used for a instant search feature for all movies and shows registered in tmdb, leave empty to disable.
```bash
# .env example values
SEASONED_API=http://localhost:31459
ELASTIC=http://localhost:9200
ELASTIC_INDEX=shows,movies
SEASONED_DOMAIN=request.movie
```
## Build Steps
```bash
# install dependencies
npm install
yarn
# serve with hot reload at localhost:8080
npm run dev
# build vue project using webpack
yarn build
# build for production with minification
npm run build
# test or host built files using docker, might require sudo:
docker build -t seasoned .
docker run -d -p 5000:5000 --name seasoned-request --env-file .env seasoned
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
This app uses [history mode](https://router.vuejs.org/en/essentials/history-mode.html)
## Development Steps
```bash
# serve project with hot reloading at localhost:8080
yarn dev
```
To proxy requests to `/api` either update `SEASONED_API` in `.env` or run set environment variable, e.g.:
```bash
# export and run
export SEASONED_API=http://localhost:31459
yarn dev
# or run with environment variable inline
SEASONED_API=http://localhost:31459 yarn dev
```
## Documentation
All api functions are documented in `/docs` and [found here](docs/api.md).
[html version also available](http://htmlpreview.github.io/?https://github.com/KevinMidboe/seasoned/blob/release/v2/docs/api/index.html)
## License
[MIT](https://github.com/dmtrbrl/tmdb-app/blob/master/LICENSE)

9
docker-entrypoint.sh Normal file
View File

@@ -0,0 +1,9 @@
#!/bin/sh
set -eu
export SEASONED_API=${SEASONED_API:-http://localhost:31459}
export SEASONED_DOMAIN=${SEASONED_DOMAIN:-localhost}
envsubst '$SEASONED_API,$SEASONED_DOMAIN' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
exec "$@"

View File

@@ -2,7 +2,7 @@ server {
listen 5000 default_server;
listen [::]:5000 default_server;
# server_name request.movie;
server_name $SEASONED_DOMAIN;
root /usr/share/nginx/html;
gzip on;
@@ -20,7 +20,7 @@ server {
}
location /api {
proxy_pass http://request.movie;
proxy_pass $SEASONED_API;
}
location / {

View File

@@ -20,6 +20,7 @@
"dependencies": {
"chart.js": "3.9.1",
"connect-history-api-fallback": "2.0.0",
"dotenv": "^16.0.1",
"express": "4.18.1",
"vue": "3.2.37",
"vue-router": "4.1.3",

View File

@@ -1,10 +1,7 @@
import config from "./config";
import { IList, IMediaCredits, IPersonCredits } from "./interfaces/IList";
const { ELASTIC_URL, ELASTIC_INDEX } = config;
let { SEASONED_URL } = config;
if (!SEASONED_URL) SEASONED_URL = window.location.origin;
const { ELASTIC, ELASTIC_INDEX } = process.env;
const API_HOSTNAME = window.location.origin;
// - - - TMDB - - -
@@ -21,7 +18,7 @@ const getMovie = (
releaseDates
}: { checkExistance: boolean; credits: boolean; releaseDates?: boolean }
) => {
const url = new URL("/api/v2/movie", SEASONED_URL);
const url = new URL("/api/v2/movie", API_HOSTNAME);
url.pathname = `${url.pathname}/${id.toString()}`;
if (checkExistance) {
url.searchParams.append("check_existance", "true");
@@ -55,7 +52,7 @@ const getShow = (
releaseDates
}: { checkExistance: boolean; credits: boolean; releaseDates?: boolean }
) => {
const url = new URL("/api/v2/show", SEASONED_URL);
const url = new URL("/api/v2/show", API_HOSTNAME);
url.pathname = `${url.pathname}/${id.toString()}`;
if (checkExistance) {
url.searchParams.append("check_existance", "true");
@@ -82,7 +79,7 @@ const getShow = (
* @returns {object} Tmdb response
*/
const getPerson = (id, credits = false) => {
const url = new URL("/api/v2/person", SEASONED_URL);
const url = new URL("/api/v2/person", API_HOSTNAME);
url.pathname = `${url.pathname}/${id.toString()}`;
if (credits) {
url.searchParams.append("credits", "true");
@@ -102,7 +99,7 @@ const getPerson = (id, credits = false) => {
* @returns {object} Tmdb response
*/
const getMovieCredits = (id: number): Promise<IMediaCredits> => {
const url = new URL("/api/v2/movie", SEASONED_URL);
const url = new URL("/api/v2/movie", API_HOSTNAME);
url.pathname = `${url.pathname}/${id.toString()}/credits`;
return fetch(url.href)
@@ -119,7 +116,7 @@ const getMovieCredits = (id: number): Promise<IMediaCredits> => {
* @returns {object} Tmdb response
*/
const getShowCredits = (id: number): Promise<IMediaCredits> => {
const url = new URL("/api/v2/show", SEASONED_URL);
const url = new URL("/api/v2/show", API_HOSTNAME);
url.pathname = `${url.pathname}/${id.toString()}/credits`;
return fetch(url.href)
@@ -136,7 +133,7 @@ const getShowCredits = (id: number): Promise<IMediaCredits> => {
* @returns {object} Tmdb response
*/
const getPersonCredits = (id: number): Promise<IPersonCredits> => {
const url = new URL("/api/v2/person", SEASONED_URL);
const url = new URL("/api/v2/person", API_HOSTNAME);
url.pathname = `${url.pathname}/${id.toString()}/credits`;
return fetch(url.href)
@@ -154,7 +151,7 @@ const getPersonCredits = (id: number): Promise<IPersonCredits> => {
* @returns {object} Tmdb list response
*/
const getTmdbMovieListByName = (name: string, page = 1): Promise<IList> => {
const url = new URL(`/api/v2/movie/${name}`, SEASONED_URL);
const url = new URL(`/api/v2/movie/${name}`, API_HOSTNAME);
url.searchParams.append("page", page.toString());
return fetch(url.href).then(resp => resp.json());
@@ -167,7 +164,7 @@ const getTmdbMovieListByName = (name: string, page = 1): Promise<IList> => {
* @returns {object} Request response
*/
const getRequests = (page = 1) => {
const url = new URL("/api/v2/request", SEASONED_URL);
const url = new URL("/api/v2/request", API_HOSTNAME);
url.searchParams.append("page", page.toString());
return fetch(url.href).then(resp => resp.json());
@@ -175,7 +172,7 @@ const getRequests = (page = 1) => {
};
const getUserRequests = (page = 1) => {
const url = new URL("/api/v1/user/requests", SEASONED_URL);
const url = new URL("/api/v1/user/requests", API_HOSTNAME);
url.searchParams.append("page", page.toString());
return fetch(url.href).then(resp => resp.json());
@@ -188,7 +185,7 @@ const getUserRequests = (page = 1) => {
* @returns {object} Tmdb response
*/
const searchTmdb = (query, page = 1, adult = false, mediaType = null) => {
const url = new URL("/api/v2/search", SEASONED_URL);
const url = new URL("/api/v2/search", API_HOSTNAME);
if (mediaType != null && ["movie", "show", "person"].includes(mediaType)) {
url.pathname += `/${mediaType}`;
}
@@ -214,7 +211,7 @@ const searchTmdb = (query, page = 1, adult = false, mediaType = null) => {
* @returns {object} Torrent response
*/
const searchTorrents = query => {
const url = new URL("/api/v1/pirate/search", SEASONED_URL);
const url = new URL("/api/v1/pirate/search", API_HOSTNAME);
url.searchParams.append("query", query);
return fetch(url.href)
@@ -233,7 +230,7 @@ const searchTorrents = query => {
* @returns {object} Success/Failure response
*/
const addMagnet = (magnet: string, name: string, tmdbId: number | null) => {
const url = new URL("/api/v1/pirate/add", SEASONED_URL);
const url = new URL("/api/v1/pirate/add", API_HOSTNAME);
const options = {
method: "POST",
@@ -263,7 +260,7 @@ const addMagnet = (magnet: string, name: string, tmdbId: number | null) => {
* @returns {object} Success/Failure response
*/
const request = (id, type) => {
const url = new URL("/api/v2/request", SEASONED_URL);
const url = new URL("/api/v2/request", API_HOSTNAME);
const options = {
method: "POST",
@@ -286,7 +283,7 @@ const request = (id, type) => {
* @returns {object} Success/Failure response
*/
const getRequestStatus = (id, type = undefined) => {
const url = new URL("/api/v2/request", SEASONED_URL);
const url = new URL("/api/v2/request", API_HOSTNAME);
url.pathname = `${url.pathname}/${id.toString()}`;
url.searchParams.append("type", type);
@@ -301,7 +298,7 @@ const getRequestStatus = (id, type = undefined) => {
};
const watchLink = (title, year) => {
const url = new URL("/api/v1/plex/watch-link", SEASONED_URL);
const url = new URL("/api/v1/plex/watch-link", API_HOSTNAME);
url.searchParams.append("title", title);
url.searchParams.append("year", year);
@@ -311,7 +308,7 @@ const watchLink = (title, year) => {
};
const movieImages = id => {
const url = new URL(`v2/movie/${id}/images`, SEASONED_URL);
const url = new URL(`v2/movie/${id}/images`, API_HOSTNAME);
return fetch(url.href).then(resp => resp.json());
};
@@ -319,7 +316,7 @@ const movieImages = id => {
// - - - Seasoned user endpoints - - -
const register = (username, password) => {
const url = new URL("/api/v1/user", SEASONED_URL);
const url = new URL("/api/v1/user", API_HOSTNAME);
const options = {
method: "POST",
headers: { "Content-Type": "application/json" },
@@ -339,7 +336,7 @@ const register = (username, password) => {
};
const login = (username, password, throwError = false) => {
const url = new URL("/api/v1/user/login", SEASONED_URL);
const url = new URL("/api/v1/user/login", API_HOSTNAME);
const options = {
method: "POST",
headers: { "Content-Type": "application/json" },
@@ -356,7 +353,7 @@ const login = (username, password, throwError = false) => {
};
const logout = (throwError = false) => {
const url = new URL("/api/v1/user/logout", SEASONED_URL);
const url = new URL("/api/v1/user/logout", API_HOSTNAME);
const options = { method: "POST" };
return fetch(url.href, options).then(resp => {
@@ -369,7 +366,7 @@ const logout = (throwError = false) => {
};
const getSettings = () => {
const url = new URL("/api/v1/user/settings", SEASONED_URL);
const url = new URL("/api/v1/user/settings", API_HOSTNAME);
return fetch(url.href)
.then(resp => resp.json())
@@ -380,7 +377,7 @@ const getSettings = () => {
};
const updateSettings = settings => {
const url = new URL("/api/v1/user/settings", SEASONED_URL);
const url = new URL("/api/v1/user/settings", API_HOSTNAME);
const options = {
method: "PUT",
@@ -399,7 +396,7 @@ const updateSettings = settings => {
// - - - Authenticate with plex - - -
const linkPlexAccount = (username, password) => {
const url = new URL("/api/v1/user/link_plex", SEASONED_URL);
const url = new URL("/api/v1/user/link_plex", API_HOSTNAME);
const body = { username, password };
const options = {
@@ -417,7 +414,7 @@ const linkPlexAccount = (username, password) => {
};
const unlinkPlexAccount = () => {
const url = new URL("/api/v1/user/unlink_plex", SEASONED_URL);
const url = new URL("/api/v1/user/unlink_plex", API_HOSTNAME);
const options = {
method: "POST",
@@ -435,7 +432,7 @@ const unlinkPlexAccount = () => {
// - - - User graphs - - -
const fetchGraphData = (urlPath, days, chartType) => {
const url = new URL(`/api/v1/user/${urlPath}`, SEASONED_URL);
const url = new URL(`/api/v1/user/${urlPath}`, API_HOSTNAME);
url.searchParams.append("days", days);
url.searchParams.append("y_axis", chartType);
@@ -452,7 +449,7 @@ const fetchGraphData = (urlPath, days, chartType) => {
// - - - Random emoji - - -
const getEmoji = () => {
const url = new URL("/api/v1/emoji", SEASONED_URL);
const url = new URL("/api/v1/emoji", API_HOSTNAME);
return fetch(url.href)
.then(resp => resp.json())
@@ -473,7 +470,7 @@ const getEmoji = () => {
* @returns {object} List of movies and shows matching query
*/
const elasticSearchMoviesAndShows = (query, count = 22) => {
const url = new URL(`${ELASTIC_INDEX}/_search`, ELASTIC_URL);
const url = new URL(`${ELASTIC_INDEX}/_search`, ELASTIC);
const body = {
sort: [{ popularity: { order: "desc" } }, "_score"],

View File

@@ -86,8 +86,8 @@
query.value = decodeURIComponent(params.get("query"));
}
const elasticUrl = config.ELASTIC_URL;
if (elasticUrl === undefined || elasticUrl === "") {
const { ELASTIC } = process.env;
if (ELASTIC === undefined || ELASTIC === "") {
disabled.value = true;
}

View File

@@ -1,9 +0,0 @@
import type IConfig from "./interfaces/IConfig";
const config: IConfig = {
SEASONED_URL: "",
ELASTIC_URL: "https://elastic.kevinmidboe.com/",
ELASTIC_INDEX: "shows,movies"
};
export default config;

View File

@@ -1,5 +0,0 @@
export default interface IConfig {
SEASONED_URL: string;
ELASTIC_URL: string;
ELASTIC_INDEX: string;
}

View File

@@ -4,6 +4,7 @@ const sass = require("sass");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const TerserPlugin = require("terser-webpack-plugin");
const dotenv = require("dotenv").config({ path: "./.env" });
const sourcePath = path.resolve(__dirname, "src");
const indexFile = path.join(sourcePath, "index.html");
@@ -11,6 +12,13 @@ const javascriptEntry = path.join(sourcePath, "main.ts");
const publicPath = path.resolve(__dirname, "public");
const isProd = process.env.NODE_ENV === "production";
// Merge inn all process.env values that match dotenv keys
Object.keys(process.env).forEach(key => {
if (key in dotenv.parsed) {
dotenv.parsed[key] = process.env[key];
}
});
module.exports = {
mode: process.env.NODE_ENV,
context: publicPath,
@@ -67,6 +75,9 @@ module.exports = {
template: indexFile,
filename: "index.html",
minify: isProd
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(dotenv.parsed)
})
],
resolve: {
@@ -131,13 +142,13 @@ if (isProd) {
module.exports.performance.hints = "warning";
}
// enable proxy by running command e.g.:
// proxyhost=https://request.movie yarn dev
const { proxyhost } = process.env;
if (proxyhost) {
// enable proxy for anything that hits /Api
// View README or update src/config.ts:SEASONED_API_URL
const { SEASONED_API } = process.env;
if (SEASONED_API) {
module.exports.devServer.proxy = {
"/api": {
target: proxyhost,
target: SEASONED_API,
changeOrigin: true
}
};

View File

@@ -4203,6 +4203,11 @@ dotenv@^10.0.0:
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
dotenv@^16.0.1:
version "16.0.1"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.1.tgz#8f8f9d94876c35dac989876a5d3a82a267fdce1d"
integrity sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==
dotgitignore@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/dotgitignore/-/dotgitignore-2.1.0.tgz#a4b15a4e4ef3cf383598aaf1dfa4a04bcc089b7b"