Dont waste money on monitoring YOUR startup
Tags: webdev, beginners, tutorial, opensource
Published: 2024-04-16 21:44:21


You know, lately I've been working on several different startups. So far, I've been using Plausible for tracking visits and events. Then I thought - why pay for their fees when I can set up self-hosted monitoring on Vercel with Supabase since I'm already using them for other startups anyway. And that's how it all started.

## Alternatives

Before I dive in, a few words about the alternatives I've used.

Plausible analytics - cool, but the price is a bit steep. 
Umami - best pricing ($19/month) for 250k events/month. 
Google Analytics - you need a PhD to use it. 
Simple Analytics, 66Analytics - paid

## Deployment

### Supabase

For it to work properly, we need to have Supabase set up. First, let's talk about how the organization and projects function.


![Supabase umami integration 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxzw3q4noc4xhu2itxww.png)

![Supabase umami integration 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mzgnydayxi7vssi7432.png)

Within one organization, we have one or multiple plans that are shared across several projects. There can be several projects. Assuming we already have an existing application project from which we want to gather events, let's create a new project with our Umami database.


![Supabase umami integration 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xaw3m9iusx5bzbczdo2t.png)

Next, let's click on the options in the bottom left corner of the screen, navigate to the database configuration, and copy our Connection string. We should change its mode to Transaction to be able to use it in a serverless environment (in our case, Vercel).


![Supabase umami integration 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4si625j7annyy3ja6v8.png)

Additionally, let's add the parameter `?pgbouncer=true` to it. The address should look something like this below.

```
postgres://postgres:[YOUR-PASSWORD]@db.ssssss.supabase.co:5432/postgres?pgbouncer=true
```

Let's remember that with a compute size of nano, we'll have a pool size of 15 and a maximum number of clients connecting concurrently set to 200.

### Umami Setup

The next step is to deploy Umami. To do this, let's fork the main repository of the [Umami project](https://github.com/umami-software/umami). Then clone it locally and create an environment file `.env`. Inside it, specify the environment variable `DATABASE_URL`, which will point to our PostgreSQL database.

```
DATABASE_URL=postgres://postgres:[YOUR-PASSWORD]@db.ssssss.supabase.co:5432/postgres?pgbouncer=true
```

Next, let's install the dependencies, build the project, and start it.

```
yarn install
yarn build
yarn start
```

The final step is to complete the entire login process for Umami. The login and password for logging in are `admin:umami`. After changing the password in the settings, we are ready for deployment.

### Vercel

The last step is to deploy to Vercel. To do this, log in to your account, create a new project, and import the project from our forked Umami GitHub repository. In the environment variables section, let's add our `DATABASE_URL` address.


![Supabase umami integration 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4g9uucx7ng6bmjo899j9.png)

After deployment, we're ready to create a new site from within Umami and add its tracking code to our application. That's all.