Merge pull request #24 from holepunchto/pear-desktop-project-comments

Simplify 'starting a pear desktop project' + titlecase
This commit is contained in:
David Mark Clements
2024-01-25 15:13:43 +01:00
committed by GitHub

View File

@@ -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 `<h1>chat</h1>` to `<h1>Hello world</h1>`.
Try changing `<h1>chat</h1>` to `<h1>Hello world</h1>` 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 is 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