Having trouble with self hosted OTT not loading in any browser #1177

ghost · 2023-12-14T02:45:07Z

ghost
Dec 14, 2023

Somehow OTT no longer works for me. I've tried wiping everything and even using old version. I don't know what the Hell happened. I've even tried removing my reverse proxy from the equation. I've used different browsers. (None of my users remotely and with their own browsers can load it, either.)

It's been a few weeks now and all I get is a blank page because resources cannot load.

I don't know how even old versions don't work anymore, nor how starting from scratch causes the same problem, too.

I use docker. I use the dyc3/opentogethertube:latest image.

Welcome to...any thoughts at all. 😅

Answered by dyc3

Dec 14, 2023

It's always just serving the index.html? Do you have a OTT_BASE_URL set to something other than /? If you do, I don't think the pre built image will work. The base URL thing relies on having OTT_BASE_URL set when the client is built. You'd have to build it yourself from a source checkout, or modify the image by rebuilding the client with yarn build.

View full answer

dyc3 · 2023-12-14T14:06:54Z

dyc3
Dec 14, 2023
Maintainer

Huh. Yeah this this definitely a weird one. Let's try and figure out what actually works.

If you curl http://<your ott's ip and port>/api/status, it should return {"status": "ok"}. That would mean the server is at least functional.
Could you post the logs?
What's the HTTP response for that css file? It says its text/html, I'd like to see what the body is.
When you are using the docker image, make sure you docker pull before creating the container to make sure it's actually the latest version.

4 replies

ghost Dec 14, 2023

The image is most definitely the latest. Pulling pulls nothing new.

$ curl http://127.0.0.1:50001/api/status

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="description" content="Watch videos together online with your friends. Real-time syncronized playback. Optional voting system. Dark theme. No sign up required. All Open Source.">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-148983263-2"></script>
    <title>OpenTogetherTube - Enjoy Together - Watch videos together online with your friends</title>
    <script type="module" crossorigin src="/assets/index-a5dc797b.js"></script>
    <link rel="stylesheet" href="/assets/index-69960494.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but OpenTogetherTube doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>

  </body>
</html>

$ curl http://127.0.0.1:50001/assets/index-69960494.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="description" content="Watch videos together online with your friends. Real-time syncronized playback. Optional voting system. Dark theme. No sign up required. All Open Source.">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-148983263-2"></script>
    <title>OpenTogetherTube - Enjoy Together - Watch videos together online with your friends</title>
    <script type="module" crossorigin src="/assets/index-a5dc797b.js"></script>
    <link rel="stylesheet" href="/assets/index-69960494.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but OpenTogetherTube doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>

  </body>
</html>

I think OTT is serving all pages as the exact same, I guess...

Docker Logs don't reveal any problems:

$ docker logs ott

yarn workspace v1.22.19
yarn run v1.22.19
$ /usr/app/node_modules/.bin/sequelize-cli db:migrate

Sequelize CLI [Node: 18.16.0, CLI: 6.6.1, ORM: 6.32.0]

Loaded configuration file "config/config.mjs".
Using environment "production".
No migrations were executed, database schema was already up to date.
Done in 0.56s.
Done in 0.81s.

> opentogethertube@0.6.0 start
> yarn workspace ott-server start

yarn workspace v1.22.19
yarn run v1.22.19
$ node --experimental-specifier-resolution=node --loader ts-node/esm app.ts
(node:96) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:96) ExperimentalWarning: The Node.js specifier resolution flag is experimental. It could change or be removed at any time.
2023-12-13 20:47:37 config warn No extra base config found at /usr/app/env/docker.base.toml
2023-12-13 20:47:37 config warn No config found at /usr/app/env/base.toml
2023-12-13 20:47:37 config warn No environment config found at /usr/app/env/production.toml
2023-12-13 20:47:37 app info Environment: production
2023-12-13 20:47:37 app info Is Heroku? false
2023-12-13 20:47:37 app info Is Docker? true
2023-12-13 20:47:37 app info Database mode: postgres
2023-12-13 20:47:37 app info Search enabled: true
2023-12-13 20:47:37 app info Search provider: youtube
2023-12-13 20:47:37 app info Rate limiting enabled: true
2023-12-13 20:47:37 db info Database models loading
2023-12-13 20:47:37 db info Using database: REDACTED
2023-12-13 20:47:37 redisclient info Building redis clients
2023-12-13 20:47:37 app info Latency to redis: 3.239224076271057ms
2023-12-13 20:47:37 app warn Trusting 1 layers of reverse proxy, X-Forwarded-* headers will be trusted.
2023-12-13 20:47:37 balancer warn Load balancing is disabled
2023-12-13 20:47:37 roommanager info Starting room manager
2023-12-13 20:47:37 infoextract info Enabled video services: youtube, vimeo, dailymotion, direct, hls, tubi, reddit, googledrive, peertube, pluto
2023-12-13 20:47:37 infoextract warn Google Drive API key is not set, disabling Google Drive service
2023-12-13 20:47:37 app info Server started on  8080

My ott.env file for Docker

NODE_ENV=production
DOCKER=true
HEROKU=false
PORT=8080
OTT_HOSTNAME=REDACTED
OTT_BASE_URL=REDACTED
LOG_LEVEL=info
LOG_FILE=./logs/ott.log
DB_MODE=postgres
POSTGRES_HOST=ott-db
POSTGRES_DB=REDACTED
POSTGRES_USER=REDACTED
POSTGRES_PASSWORD=REDACTED
REDIS_HOST=ott-redis
ENABLE_SEARCH=true
SEARCH_PROVIDER=youtube
ADD_PREVIEW_SEARCH_MIN_LENGTH=3
ADD_PREVIEW_SEARCH_RESULTS_COUNT=8
ADD_PREVIEW_PLAYLIST_RESULTS_COUNT=40
YOUTUBE_API_KEY=REDACTED
ENABLE_RATE_LIMIT=true
RATE_LIMIT_KEY_PREFIX=rateLimit
OPENTOGETHERTUBE_API_KEY=REDACTED
SESSION_SECRET=REDACTED
FORCE_INSECURE_COOKIES=false
BALANCING_ENABLED=false

relevant bits from compose.yaml

  ####################
  # OpenTogetherTube #
  ott:
    image: "dyc3/opentogethertube:latest"
    container_name: "ott"
    restart: "unless-stopped"
    depends_on:
      ott-redis:
        condition: "service_healthy"
      ott-db:
        condition: "service_healthy"
    ports: [ "127.0.0.1:50001:8080" ]
    networks: [ "ott" ]
    volumes: [ "./ott/env:/usr/app/env:ro" ]
    env_file: [ "./envs/common.env", "./envs/ott.env" ]
  ott-db:
    image: "postgres:16-alpine"
    container_name: "ott-db"
    restart: "unless-stopped"
    user: "1000:1000"
    expose: [ 5432 ]
    networks: [ "ott" ]
    volumes: [ "./ott/db:/var/lib/postgresql/data" ]
    env_file: [ "./envs/common.env", "./envs/ott-db.env" ]
    healthcheck:
      test: [ "CMD", "pg_isready", "-q", "-d", "${OTT_DB_NAME}", "-U", "${OTT_DB_USER}" ]
      interval: "10s"
      timeout: "45s"
      retries: 10
  ott-redis:
    image: "redis:alpine"
    container_name: "ott-redis"
    restart: "unless-stopped"
    user: "1000:1000"
    expose: [ 6379 ]
    networks: [ "ott" ]
    volumes: [ "./ott/redis:/data" ]
    env_file: "./envs/common.env"
    healthcheck:
      test: [ "CMD", "redis-cli", "ping" ]
      interval: "10s"
      timeout: "45s"
      retries: 10
  # OpenTogetherTube #
  ####################

dyc3 Dec 14, 2023
Maintainer

It's always just serving the index.html? Do you have a OTT_BASE_URL set to something other than /? If you do, I don't think the pre built image will work. The base URL thing relies on having OTT_BASE_URL set when the client is built. You'd have to build it yourself from a source checkout, or modify the image by rebuilding the client with yarn build.

Answer selected

ghost Dec 14, 2023

Did something change on that at some point? I've had OTT_BASE_URL set to https://ott.example.com for...ever? Or maybe I'm crazy?

Either way, finally sorted out. Woohoo! 🥳

dyc3 Dec 14, 2023
Maintainer

It hasn't recently changed, but that depends on what version you were using previously. Glad we figured it out though

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Having trouble with self hosted OTT not loading in any browser #1177

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Having trouble with self hosted OTT not loading in any browser #1177

ghost Dec 14, 2023

Replies: 1 comment · 4 replies

dyc3 Dec 14, 2023 Maintainer

ghost Dec 14, 2023

dyc3 Dec 14, 2023 Maintainer

ghost Dec 14, 2023

dyc3 Dec 14, 2023 Maintainer

ghost
Dec 14, 2023

Replies: 1 comment 4 replies

dyc3
Dec 14, 2023
Maintainer

dyc3 Dec 14, 2023
Maintainer

dyc3 Dec 14, 2023
Maintainer