bazarr/frontend

Bazarr Frontend

Dependencies

• Either Node.js installed manually or using Node Version Manager
• npm (included in Node.js)
• (Optional) Docker for building and running the frontend using a Docker image

The recommended Node version to use and maintained is managed on the .nvmrc file. You can either install manually or use nvm install followed by nvm use.

Getting Started

1. Clone or download this repository

   $ git clone https://github.com/morpheus65535/bazarr.git
   $ cd bazarr/frontend
   

2. Install build dependencies in the project directory

   $ npm install
   

3. (Optional) Duplicate .env.development file and rename to .env.development.local

   $ cp .env.development .env.development.local
   

4. (Optional) Update your backend server's API key in .env.development.local

   # API key of your backend
   VITE_API_KEY="YOUR_SERVER_API_KEY"
   

5. (Optional) Change the address of your backend server

   # Address of your backend
   VITE_PROXY_URL=http://localhost:6767
   

6. Run Bazarr backend

   $ python3 ../bazarr.py
   

7. Run the web development tool

   $ npm start
   

Building with Docker

For Docker-based development, please use the comprehensive development environment provided in the dev-setup folder:

cd ../dev-setup
docker compose up --build

This will start both the backend and frontend in separate optimized containers with live reloading enabled.

Benefits of the dev-setup Docker Environment

• Full Stack: Runs both backend and frontend with proper networking
• Live Reloading: Changes to your code are immediately reflected
• Consistency: Ensures the app runs in the same environment across all systems
• Isolation: Avoids dependency conflicts with other projects on your machine
• Optimized: Separate containers for backend (Python/Alpine) and frontend (Node.js)

For more details, see the dev-setup README.

3. Open the app in your browser at http://localhost:5173.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:5173 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds the app in production mode and save to the build folder.

npm run format

Format code for all files in frontend folder

This command will be automatically triggered before any commits to git. Run manually if you modify .prettierignore or .prettierrc.