# Starting a Pear Project This tutorial will show how to create a basic chat app with Pear, and through that teach how to use some of the main building blocks. In this first part of the app, users will be able to create chat rooms, connect to each other, and send messages. ## Step 1. Init First create a new project using `pear init`. ``` $ mkdir chat $ cd chat $ pear init --yes ``` This will create a base structure for the project. - `package.json`. Config for the app. Notice the `pear` property. - `index.html`. The UI for the app. - `app.js`. The main code. - `test/index.test.js`. Skeleton for writing tests. ## Step 2. Test 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. Because it's opened in development mode, developer tools are also opened. ![Running pear dev](../assets/chat-app-1.png) ## Step 3. Automatic reload Pear apps have automatic reload included. 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. Change `

chat

` to `

Hello world

` and go to the app again. It should now look like this: ![Automatic reload](../assets/chat-app-2.png) ## Step 4. Chagne gui settings It's possible to change various settings with Pear. This is done with the `pear` property in `package.json`. See all the possibly options in the [reference doc](../reference/configuration.md). For now, open `package.json` and update it : ``` { ... "pear": { "gui": { "backgroundColor": "#00ff00", "height": 540, "width": 720, "alwaysOnTop": true } } ... } ``` When running the app now, it will be very green, and always stay on top. ## Step 5. Create a basic UI To add some more interesting UI, let's have an example of a chat app, where users are able to create or join chat rooms and write messages to each other. ``` html
- or -
``` After running with `pear dev` it should look like this: ![Layout of the app](../assets/chat-app-3.png) ## Next Now that there's some basic UI for a chat app, let's take a look at [making a Pear App](./making-a-pear-app.md).