Deploying the client#

Method 1 - Vercel - Recommended#

1. Click here to fork the movie-web Github repository

2. Click here to go to Vercel

3. Sign in using either a GitHub, GitLab, or Bitbucket.

4. Clicking the "New Project" button on the top right of your dashboard and following the steps to create a new project for your self hosted version of movie web.

5. After clicking it, you'll be presented with a list of Git repositories that the Git account you've signed up with has write access to.

6. Select your own fork of the movie-web Github repository.

7. Configure the environment variables:

   • VITE_CORS_PROXY_URL: Enter your proxy URL here. Make sure to not have a slash at the end of your URL.

     Example (THIS IS AN EXAMPLE, IT WON'T WORK FOR YOU): https://test-proxy.test.workers.dev

   • VITE_TMDB_READ_API_KEY: Enter your TMDB Read Access Token here. Please read the TMDB page on how to get an API key.

   • VITE_BACKEND_URL: Only set if you have a self-hosted backend. Put in your backend URL. Check out configuration reference for details. Make sure to not have a slash at the end of the URL.

8. Click "Deploy"

9. Congrats! You have your own version of movie-web hosted.

10. You may wish to configure a custom domain - Please consult the Vercel docs for how to do this.

Method 2 - Static Web Host#

1. Download the file movie-web.zip from the latest release: 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 an editor such as Notepad, Visual Studio Code or similar.

4. Put your proxy URL in-between the double quotes of VITE_CORS_PROXY_URL: "". Make sure to not have a slash at the end of your URL.

   Example (THIS IS AN EXAMPLE, IT WON'T WORK FOR YOU): VITE_CORS_PROXY_URL: "https://test-proxy.test.workers.dev"

5. Put your TMDB Read Access Token inside the quotes of VITE_TMDB_READ_API_KEY: "". Please read the TMDB page on how to get an API key.

6. If you have a self-hosted backend server, enter your URL in the VITE_BACKEND_URL variable. Check out configuration reference for details. Make sure to not have a slash at the end of the URL.

7. Save the file.

8. Upload all of the files to a static website hosting such as:

   • GitHub Pages
   • Netlify
   • Vercel
   • Etc, there are lots of options.

9. Congrats! You have your own version of movie-web hosted.

Method 3 - Docker Compose - Home Network#

This method is meant for those using a desktop device or single board computer with a minimum of 4GB of RAM such as a Raspberry Pi to run movie-web on there home network for network connected devices.

1. Ensure you have docker installed. In a newly created directory called movie-web create a file called docker-compose.yaml. Paste the contents of the code block below into this file.

version: "3.8"
 
services:
 
  movieweb:
    build:
      context: https://github.com/movie-web/movie-web.git
      # args:
      #   TMDB_READ_API_KEY: ""
      #   CORS_PROXY_URL: ""
      #   BACKEND_URL: ""
    ports:
      - "80:80"
    restart: unless-stopped

2. Within the docker-compose.yaml file uncomment args, TMDB_READ_API_KEY, CORS_PROXY_URL.

• Make sure args is in-line with context
• Make sure TMDB_READ_API_KEY and CORS_PROXY_URL are tabbed once to the right of args.

3. Put your proxy URL in-between the double quotes of CORS_PROXY_URL: "". Make sure to not have a slash at the end of your URL.

   Example (THIS IS AN EXAMPLE, IT WON'T WORK FOR YOU): CORS_PROXY_URL: "https://test-proxy.test.workers.dev"

4. Put your TMDB Read Access Token inside the quotes of TMDB_READ_API_KEY: "". Please read the TMDB page on how to get an API key.

5. Uncomment and add any additional environment variables you may need. Remove the VITE_ prefix when adding an environment variable to args.

6. Save the file!

7. Now use docker to run movieweb as background service.

# movie-web is the current working directory
$ docker compose up --detach

8. Verify that setup was successful

• Navigate to http://localhost. You should see the UI for movie-web. Find something to watch and make sure that it plays.

• View logs with

  $ docker compose logs --follow movieweb

9. Set a static IP address for your device.

• For Raspberry Pi: guide
• For Mac: guide
• For Windows: guide

10. Navigate to movie web at http://<static-ip-address from another device connected to your network.

To Perform Updates For New Releases of Movie Web#

1. Make sure movie-web is your current working directory and run:

# Re-build the image and start the container
$ docker compose up --build --detach