From 7f3899ae39d143a05b3d3e95847c55474bf77a11 Mon Sep 17 00:00:00 2001 From: HDegroote <75906619+HDegroote@users.noreply.github.com> Date: Wed, 24 Jan 2024 22:26:13 +0100 Subject: [PATCH 1/3] Simplify starting a pear desktop project + titlecase --- guide/starting-a-pear-desktop-project.md | 44 +++++++++++------------- 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/guide/starting-a-pear-desktop-project.md b/guide/starting-a-pear-desktop-project.md index 18899e5..da18c65 100644 --- a/guide/starting-a-pear-desktop-project.md +++ b/guide/starting-a-pear-desktop-project.md @@ -1,10 +1,10 @@ # 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. +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) . ## Step 1. Initialization -To create a new Pear project use `pear init`. +Use `pear init` to create a new Pear project. ``` mkdir chat @@ -12,46 +12,44 @@ cd chat pear init --yes ``` -This will create a base structure for the project. +This creates the base project structure. -- `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. +- `package.json`. App configuration. Notice the `pear` property. +- `index.js`. App entrypoint. +- `app.js`. Main code. +- `test/index.test.js`. Test skeleton. -## Step 2. Check that everything works +## Step 2. Verify Everything Works -Before writing any code, make sure that everything works the way it's supposed to by using `pear dev`. +Use `pear dev` to verify everything works as expected. ``` pear dev ``` -This will open the app in development mode, by default developer tools are also opened. +The app should open in development mode. By default, developer tools are also opened. ![Running pear dev](../assets/chat-app-1.png) -## Step 3. Automatic reload +## Step 3. Automatic Reload -By default Pear watches project files and automatically reloads the page when files change. +Pear watches project files. When they change, the app is automatically reloaded. -This means that there is no need to stop and start the app again to see changes. +While keeping the `pear dev` command running, open `index.html` in an editor. -While keeping the app open with `pear dev`, open `index.html` in a code editor. +Change `

chat

` to `

Hello world

`. -Try changing `

chat

` to `

Hello world

` and look observe the app update. - -It should now look like this: +The app should now show: ![Automatic reload](../assets/chat-app-2.png) -> 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. +> Live reload with hot-module reloading is possible by using the `pear.watch` configuration and the [`pear.updates`](../reference/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 all happens via the `pear` property in `package.json` +Application configuration lives under the `pear` property in `package.json` -For now, open `package.json` and update it like so: +Open `package.json` and update it to: ``` { @@ -67,11 +65,9 @@ For now, open `package.json` and update it like so: } ``` -If the app is open, close it and then run `pear dev` to see the configuration change. +Close the app and re-run `pear dev` to see the changes: the background is now light blue, and the initial window size is different. -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. +See the [Configuration Documentation](../reference/configuration.md) for all options. ## Next From f8510c00f56d068d88b39dde9b8280c1e0f5f62a Mon Sep 17 00:00:00 2001 From: HDegroote <75906619+HDegroote@users.noreply.github.com> Date: Thu, 25 Jan 2024 01:36:01 +0100 Subject: [PATCH 2/3] Spacing --- guide/starting-a-pear-desktop-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/starting-a-pear-desktop-project.md b/guide/starting-a-pear-desktop-project.md index da18c65..47eb492 100644 --- a/guide/starting-a-pear-desktop-project.md +++ b/guide/starting-a-pear-desktop-project.md @@ -1,6 +1,6 @@ # 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) . +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). ## Step 1. Initialization From f3a187a37e8a5db044c2746704fd533991705e82 Mon Sep 17 00:00:00 2001 From: David Mark Clements Date: Thu, 25 Jan 2024 15:13:29 +0100 Subject: [PATCH 3/3] Update guide/starting-a-pear-desktop-project.md --- guide/starting-a-pear-desktop-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/starting-a-pear-desktop-project.md b/guide/starting-a-pear-desktop-project.md index 47eb492..f993a92 100644 --- a/guide/starting-a-pear-desktop-project.md +++ b/guide/starting-a-pear-desktop-project.md @@ -47,7 +47,7 @@ The app should now show: ## Step 4. Configuration -Application configuration lives under the `pear` property in `package.json` +Application configuration is under the `pear` property in `package.json` Open `package.json` and update it to: