This web client is in active development and will replace the current VueJS web client.

You can test using this docker image built for every commit:

ghcr.io/audiobookshelf/audiobookshelf-react:latest

For testing, it is recommended that you use a separate config & libraries from your production server.

This assumes that you have audiobookshelf locally.

1. git clone https://github.com/audiobookshelf/audiobookshelf-client-react.git
2. install dependencies: cd audiobookshelf-client-react && pnpm i
3. Start the audiobookshelf server with the REACT_CLIENT_PATH env variable set to this project path. Or in the dev.js file add ReactClientPath to config.
4. In the audiobookshelf server repo run with pnpm run dev as usual. This will serve the NextJS app using HMR.

If you access the dev app through a reverse proxy (not localhost), add AllowedDevOrigins to your audiobookshelf dev.js (mapped to ALLOWED_DEV_ORIGINS in index.js). Restart the dev server after changing it.

// example dev.js file in audiobookshelf
const Path = require('path')

module.exports.config = {
  ConfigPath: Path.resolve('config'),
  MetadataPath: Path.resolve('metadata'),
  ReactClientPath: Path.resolve('../audiobookshelf-client-react'),
  AllowedDevOrigins: ['your-reverse-proxy-host.example.com']
}

1. pnpm run build this NextJS app
2. Start the audiobookshelf server with pnpm run start-dev (uses the dev.js file w/ production)