LogoLogo
  • Pear by Holepunch
  • Pear runtime
    • Command-Line-Interface (CLI)
    • Application-Programming-Interface (API)
    • Application Configuration
  • Bare reference
    • Overview
    • Application-Programming-Interface (API)
    • Node.js Compatibility with Bare
    • Bare Modules
  • Guides
    • Getting Started
    • Starting a Pear Desktop Project
    • Making a Pear Desktop Application
    • Starting a Pear Terminal Project
    • Making a Pear Terminal Application
    • Sharing a Pear Application
    • Marking a Release
    • Making a Bare Mobile Application
    • Debugging a Pear Terminal Application
    • Creating a Pear Init Template
  • Building blocks
    • Hypercore
    • Hyperbee
    • Hyperdrive
    • Autobase
    • HyperDHT
    • Hyperswarm
  • How-tos
    • Connect two peers
    • Connect many peers
    • Replicate & persist
    • Manage multiple Hypercores
    • Share append-only databases
    • Create a p2p filesystem
  • Helpers
    • Corestore
    • Localdrive
    • Mirrordrive
    • Secretstream
    • Compact encoding
    • Protomux
  • Tools
    • Hypershell
    • Hypertele
    • Hyperbeam
    • Hyperssh
    • Drives
  • Apps
    • Keet
  • Examples
    • Bare on Mobile
    • React App using Pear
Powered by GitBook

Copyright © 2024 - 2025 Holepunch, S.A. de C.V. All rights reserved.

On this page
  • Step 1. Initialization
  • Step 2. Verify Everything Works
  • Step 3. Automatic Reload
  • Step 4. Configuration
  • Next
  1. Guides

Starting a Pear Desktop Project

Last updated 6 months ago

This section shows how to generate, configure, and develop a Pear desktop project, in preparation for .

Build with Pear - Episode 01: Developing with Pear

Step 1. Initialization

Use pear init to create a new Pear project.

mkdir chat
cd chat
pear init --yes

This creates the base project structure.

  • package.json. App configuration. Notice the pear property.

  • index.html. App entrypoint.

  • app.js. Main code.

  • test/index.test.js. Test skeleton.

Step 2. Verify Everything Works

Use pear run to verify everything works as expected.

pear run --dev .

A directory or link needs to be specified with pear run, here . denotes the current Project directory.

The app should open in development mode. In this mode developer tools are also opened.

Step 3. Automatic Reload

To enable automatic reloading, add the following lines to app.js :

Pear.updates(() => Pear.reload())

Run the app again using:

pear run --dev .

Now Pear watches project files. When they change, the app is automatically reloaded.

While keeping the pear run --dev . command running, open index.html in an editor.

Change <h1>desktop</h1> to <h1>Hello world</h1>.

The app should now show:

Step 4. Configuration

Application configuration is under the pear property in package.json

Open package.json and update it to:

{
  ...
  "pear": {
    "gui": {
      "height": 400,
      "width": 700
    }
  }
  ...
}

Close the app and re-run pear run --dev . to see the changes, the initial window size is different now.

Next

Live reload with hot-module reloading is possible by using the pear.watch configuration and the API. The convenience module can also be used.

See the for all options.

Configuration Documentation
Making a Pear Desktop Application
Making a Pear Desktop Application
pear-hotmods
Running pear run --dev .
Automatic reload
pear.updates