---
# System prepended metadata

title: Creating app instance
tags: [brew-js]

---

---
tags: brew-js
---

# Creating app instance

To initialize the application, the default export function `brew` must be called exactly once in your script's entry point:

```typescript
import brew from "brew-js/core";

brew((app) => {
    // app: Brew.AppInstance<{}>
    // init code, implementing app logic
});
```

To enable extensions, import the extensions and configure them by `app.use*` methods:

```typescript
import brew from "brew-js/core";
import Router from "brew-js/extension/router";

// if you are using TypeScript, add Brew.With* interface to the generic type
// this will mix in the app.use* method
brew.with(Router)((app) => {
    // the useRouter method is provided by Brew.WithRouter
    app.useRouter({
        // options for the router extension
    });
});
```

You can also define additional property members and methods on the app instance:

```typescript
import brew from "brew-js/core";

// if you are using TypeScript, define an interface for your app
interface MyApp extends Brew.WithRouter {
    myProp: string;
    myAction(): void;
}

// and then init the app with your interface
// this will allow you to define the app members
brew<MyApp>((app) => {
    app.define({
        myProp: 'myValue',
        myAction() { /* do actions */ }
    });
});
```

After defining the shape of app instance, you can write the HTML template.


### `app.beforeInit`

Postpones `ready` event until the promise is fulfilled.
Some APIs or extensions may implicitly use `app.beforeInit`.

```typescript
app.beforeInit(promiseOrCallback): void
```

###### Example

```typescript
brew(app => {
    app.beforeInit(() => {
        return new Promise((resolve) => {
            setTimeout(resolve, 1000);
        });
    });
    app.on('ready', () => {
        // this is delayed for 1 second by
        // the promise of beforeInit
    });
});
```

### `ready` event

| Bubbles | Handleable |
| ------- | ---------- |
| No      | No         |

Fired when dom is ready and every required asynchronous tasks registered by `app.beforeInit` have completed. First `navigate` event will be followed if router is enabled.

```typescript
app.on('ready', callback): void
```
