pear-docs/guide/starting-a-pear-desktop-project.md

Starting a Pear Desktop Project

In preparation for Making a Pear Application the following steps outline how to generate, configure, and develop a Pear Desktop Project.

Step 1. Initialization

To create a new Pear project use pear init.

$ mkdir chat
$ cd chat
$ pear init --yes

This will create a base structure for the project.

• package.json. Configuration for the app. Notice the pear property.
• index.html. The html for the app.
• app.js. The main code.
• test/index.test.js. Skeleton for writing tests.

Step 2. Check that everything works

Before writing any code, make sure that everything works the way it's supposed to by using pear dev.

$ pear dev

This will open the app in development mode, by default developer tools are also opened.

Step 3. Automatic reload

By default Pear watches project files and automatically reloads the page when files change.

This means that there is no need to stop and start the app again to see changes.

While keeping the app open with pear dev, open index.html in a code editor.

Try changing <h1>chat</h1> to <h1>Hello world</h1> and look observe the app update.

It should now look like this:

Live reloading with hot-module reloading can be achieved with a combination of pear.watch configuration, pear.updates API or the pear-hotmods convenience module.

Step 4. Configuration

Application configuration all happens via the pear property in package.json

For now, open package.json and update it like so:

{
  ...
  "pear": {
    "gui": {
      "backgroundColor": "#3592C3",
      "height": 400,
      "width": 700
    }
  }
  ...
}

If the app is open, close it and then run pear dev to see the configuration change.

The initial background color will be light blue and the window will start with a different initial size.

See the Configuration Documentation for all configuration possibilities.

Next

• Making a Pear Application.