Skip to main content

publica.la Reader Desktop

Cross-platform desktop application for publica.la, developed with Electron and React.js.

Description​

publica.la Reader Desktop is a desktop application that allows users to access and read digital content from the publica.la platform. The application is built using Electron for the desktop environment and React.js for the user interface.

Core Module (fenice)​

This application uses the fenice module as its functional core. This module is defined in package.json as a local dependency through a symbolic link:

{
  "dependencies": {
    "fenice": "link:../fenice"
  }
}

This configuration allows using the fenice module like any other npm package, maintaining local development capability and real-time updates. The module, located in the ../fenice directory, contains all the business logic and main functionalities of the application, including:

  • Publication and content management
  • Reading and playback system
  • Download and storage management
  • State and data management
  • API services and backend communication
  • Shared UI/UX components

The desktop application acts as a presentation layer that implements these functionalities in a desktop environment using Electron. By using fenice as an npm module:

  • Modular and organized development is maintained
  • Core code updating and maintenance is facilitated
  • Functional consistency is ensured with other platforms that also use the module

Main Technologies​

  • Electron: v25.4.0
  • React: v18.2.0
  • React Router DOM: v6.14.2
  • Redux: v4.2.1 with @reduxjs/toolkit
  • TailwindCSS: v3.3.3
  • i18next: v23.4.4 for internationalization
  • Firebase: v10.13.1
  • Electron Builder: v24.6.3 for packaging and distribution

Project Structure​

desktop/
├── public/          # Public files and Electron entry point
├── src/             # Application source code
│   ├── navigation/  # Navigation components and routes
│   └── index.js     # React entry point
├── build/           # Build files
└── node_scripts/    # Utility scripts

Prerequisites​

  • Node.js >= 18
  • Yarn >= 1.22.22

Installation​

  1. Install dependencies:

    yarn install

Available Scripts​

Development​

  • Start in development mode (Windows):

    yarn start:win
    yarn start-electron:win

  • Start in development mode (Mac/Linux):

    yarn start
    yarn start-electron

Building and Packaging​

Note: Windows packaging scripts won't work on macOS environments due to APPX format generation. Similarly, macOS packaging scripts won't work on Windows environments.

  • Build the application:

    yarn build

  • Package for all platforms:

    yarn package-electron

  • Package for Windows (Windows environment only):

    yarn package-win

  • Package for Mac (macOS environment only):

    yarn package-mac

Publishing​

The following commands publish the application directly to the configured S3 bucket in Cloudflare R2, from where automatic updates are distributed to users:

Note: As with packaging, Windows publishing scripts only work in Windows environments, and macOS scripts only work in macOS environments.

  • Publish for all platforms:

    yarn publish-electron

  • Publish for Windows (Windows environment only):

    yarn publish-win

  • Publish for Mac (macOS environment only):

    yarn publish-mac

Code Quality​

  • Linting:

    yarn lint

  • Formatting:

    yarn format

Automatic Updates​

The application includes an automatic update system using electron-updater. Updates are distributed through an S3 bucket configured in Cloudflare R2.

Security​

  • Sentry integration for error monitoring
  • Secure handling of credentials and sensitive data
  • Deeplink protocols configured for publicala://

Main Features​

  • Modern user interface with TailwindCSS
  • Multi-language support
  • State management with Redux
  • Notification system with react-toastify
  • Content download support
  • Firebase integration
  • Support for x64 and arm64 architectures (Mac)

Distribution​

The application is distributed through:

  • Windows: NSIS installer and Microsoft Store (APPX)
  • macOS: DMG installer for x64 and arm64 architectures

Contributing​

The project uses code quality tools such as:

  • ESLint for linting
  • Prettier for formatting
  • Husky for git hooks
  • lint-staged for pre-commit verification
X

Graph View