# 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`. 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. 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. Change Graphical User Interface (GUI) configuration It's possible to change various settings with Pear. This is done with the `pear` property in `package.json` For now, open `package.json` and update it : ``` { ... "pear": { "gui": { "backgroundColor": "#3592C3", "height": 400, "width": 700 } } ... } ``` When running the app now, it will be light blue, and have a different size. See all the possibly options in the [Configuration Documentation](../reference/configuration.md). ## Step 5. Create a basic User Interface (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).