mirror of
https://github.com/aljazceru/pear-docs.git
synced 2025-12-17 14:34:19 +01:00
80 lines
2.2 KiB
Markdown
80 lines
2.2 KiB
Markdown
# Starting a Pear Desktop Project
|
|
|
|
In preparation for [Making a Pear Desktop Application](./making-a-pear-desktop-app.md) 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`](../reference/api.md#pearupdateslistener-async-functionfunction) API or the [pear-hotmods](https://github.com/holepunchto/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](../reference/configuration.md) for all configuration possibilities.
|
|
|
|
|
|
## Next
|
|
|
|
* [Making a Pear Desktop Application](./making-a-pear-desktop-app.md)
|