> ## Documentation Index
> Fetch the complete documentation index at: https://ona.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure ports

When our application starts, you are automatically notified in the editor of opened ports. If you want to do things like [automate the opening of a port in your browser tab](/classic/user/configure/workspaces/ports), you can do that by configuring a `ports` block in your `.gitpod.yml`.

Let's configure our application to open an editor preview for our front-end, and suppress notifications on our backend. Copy the following `ports` block in your existing `.gitpod.yml` configuration. As before, you'll need to commit your changes and open a new workspace to view your changes.

```yml .gitpod.yml theme={null}
ports:
    - name: front-end
      port: 3000
      onOpen: open-preview

    - name: back-end
      port: 3001
      onOpen: ignore
      visibility: public
```

When running, here's how your workspace should open with VS Code:

<Frame caption="EventHub App">
  <img src="https://mintcdn.com/gitpod-13c83c2b/zAgm_ksDKbBv9tq_/images/docs/eventhub-application.png?fit=max&auto=format&n=zAgm_ksDKbBv9tq_&q=85&s=7b97fdc6b68690c6ad672499db448988" width="3502" height="2306" data-path="images/docs/eventhub-application.png" />
</Frame>

## Next Steps

[Configure a database →](/classic/user/introduction/gitpod-tutorial/4-configure-a-database)