Skip to content

Contributing

Jump to bottom
Fernando Fernández edited this page Jan 1, 2024 · 7 revisions

Thank you for your interest in helping us develop a new generation Jellyfin Web client!

This document will walk you through the various ways you can contribute to this project, as well as introduce the conventions used and guide you through setting up a development environment.

Logo Banner

Ways to contribute 🤝

We welcome all contributions and pull requests!

Translations 🌐

Head over our translation platform

If your language is not listed there, please take a look at this thread.

Code 🧮

  • We follow the fork and PR paradigm, as in all Jellyfin's projects.
  • If you have larger changes in mind, split them up in smaller PRs as much as possible. You can also open a GitHub Discussion or reach with us in Matrix to talk about the implementation details or the review process.
  • Before making a pull request for a big new feature, please open a discussion in the Features category of the discussions tab.
  • Pull requests require reviews from members of the Jellyfin Web team before being merged.
  • This repository uses the conventional commits convention for commit messages. It's mandatory to follow this convention, we want a clear commit history!
  • Please ensure that you respect code and commit message styles, otherwise pull request checks will fail and the review process will be longer.
  • This repository uses ESLint for automatically formating code and enforcing good practices.
  • The project is written in TypeScript, and using strongly typed code is recommended and expected, where possible.
  • The recommended IDE is Visual Studio Code. We also have ready to use templates for Codespaces and devcontainers

Donations 💰

You can help the Jellyfin project as a whole pay for server and API expenses through our OpenCollective.

If you want to strictly donate to the developers of Jellyfin Vue, check our top contributors and sponsor whoever you want.

The maintainers/leaders of the development of every Jellyfin project (including Jellyfin Vue) are listed here.

Bug squashing 🐛 and general feedback 💡

  • You can report bugs to help us fix issues with the client.
  • We are always looking for talented UI/UX designers to help us make Jellyfin look good, and to help improve user experience.
    If you are interested in discussing this with us, the "UI & UX" category in the Discussions tab is a great place to start.

Development setup 🛠

This repo has 2 components:

  • Frontend: This is the client per-se. Currently we just ship to web browsers, but this separation of concern is here to bridge the gap for future implementations to other runtimes (like React Native does with React) or in a micro-frontend setup. This is what you're probably looking for when doing changes.
  • Tauri: Tauri is a cross-platform runtime for web applications. Currently experimental.

Global prerequisites

  • Install Node.js LTS >=20.8.1 <21.0.0
  • npm >=10.1.0 (included in Node.js)
  • Jellyfin Server >=10.7.0

Frontend

  1. Clone or download this repository:

    git clone https://github.com/jellyfin/jellyfin-vue.git
cd jellyfin-vue

  2. Move to the frontend directory:

    cd frontend

  3. Install the build dependencies in the project directory:

    npm ci

  4. Run development build:

    npm start

    The client will be available at http://127.0.0.1:3000 by default.

Build for production 🏗️

When you're ready to deploy the client, you must build it for production specifically:

npm run build

Build output will be available under the frontend/src/dist folder.

Other build features 🗜️

Running a production build

After building the client, you can serve it directly:

npm run serve

There's also a shortcut for building the production version of the client and serving it afterwards:

npm run prod

⚠️ Although the build of the client is production-ready, the internal HTTP server should never be exposed directly to the internet and a proper webserver like Nginx should always be used instead.

Tauri

Initial setup

  1. Tauri is built with Rust. You need to install Tauri Prerequisites.

  2. Change to the tauri directory:

    cd tauri

  3. Install JavaScript dependencies:

    npm ci

At this point, you can use the same commands you already used in frontend for running the development and production build!

Directory structure

  • frontend

    • locales - Locale resources. See translations instead.
    • public - Here are assets that are deployed alongside the built client. Here you can also locate the config.json file that will be deployed to your client. See Configuration for more information.
    • scripts - Build-time scripts
    • src - Source code of the frontend
    • types - Global TypeScript types used throughout the client.

  • packaging/tauri - Tauri-related source files

Clone this wiki locally