mirror of
https://github.com/aljazceru/pear-docs.git
synced 2025-12-17 22:44:21 +01:00
3817bff892
* update desktop guide * update pear terminal guides * fixes * fix ctrl-c for example terminal app * use SIGINT on readline close --------- Co-authored-by: rafapaezbas <rafaelpaezbastida@gmail.com>
91 lines
2.3 KiB
Markdown
91 lines
2.3 KiB
Markdown
# Starting a Pear Desktop Project
|
|
|
|
This section shows how to generate, configure, and develop a Pear desktop project, in preparation for [Making a Pear Desktop Application](./making-a-pear-desktop-app.md).
|
|
|
|
{% embed url="https://www.youtube.com/watch?v=y2G97xz78gU" %} Build with Pear - Episode 01: Developing with Pear {% embeded %}
|
|
|
|
## 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` :
|
|
|
|
```js
|
|
Pear.updates(() => Pear.reload())
|
|
```
|
|
|
|
Run the app again using:
|
|
|
|
```js
|
|
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>chat</h1>` to `<h1>Hello world</h1>`.
|
|
|
|
The app should now show:
|
|
|
|
|
|
|
|
> Live reload with hot-module reloading is possible by using the `pear.watch` configuration and the [`pear.updates`](../reference/pear/api.md#pearupdateslistener-async-functionfunction) API. The [pear-hotmods](https://github.com/holepunchto/pear-hotmods) convenience module can also be used.
|
|
|
|
## 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.
|
|
|
|
See the [Configuration Documentation](../reference/pear/configuration.md) for all options.
|
|
|
|
|
|
## Next
|
|
|
|
* [Making a Pear Desktop Application](./making-a-pear-desktop-app.md)
|