Setting up Umami with Vercel and Supabase
Tags: analytics, firstpost, webdev, tutorial
Published: 2021-02-02 20:05:35

Let me start by saying that this post is based on the procedure from this Tweet. I am only providing a detailed post with screenshots for beginners or people wanting a more detailed look.

{% twitter 1353882415664668672 %}

If you don't know what [Umami](https://umami.is) is, it's a new open-source, privacy-focused analytics platform.

From the [website itself](https://umami.is/docs/about):
> Umami is a simple, easy to use, self-hosted web analytics solution. The goal is to provide you with a friendlier, privacy-focused alternative to Google Analytics and a free, open-sourced alternative to paid solutions. Umami collects only the metrics you care about and everything fits on a single page. 

It is definitely not a replacement for Google Analytics, as it doesn't have the same features, but for a lot of people it's going to be more than enough.

# Step 0: Creating the accounts

Start by [creating a GitHub account](https://github.com/join), if you don't already have one. Having a GitHub account will enable you to login on both Vercel and Supabase using OAuth, killing 3 birds with one stone.

Head over to both [Vercel](https://vercel.com/signup) and [Supabase](https://app.supabase.io/), and sign up for an account.

# Step 1: Creating the Supabase project

Once you're logged in to Supabase, head over to the dashboard and create a new project. For the name, use whatever you want, I used, well, Umami. For the password, use only alpha-numeric characters, no special symbols. It can cause issues with the database connection later on. I strongly suggest using a password generator for that. For the region, choose the closest to you. **Be sure to save the password somewhere.**

![Supabase Project Creation Settings](https://dev-to-uploads.s3.amazonaws.com/i/knariyf2k7cg1m7g5ppc.png)

# Step 2: Configure the database

Supabase can take up to two minutes to service your database. Once that is done, head over to Supabase's SQL Editor.

![Supabase SQL Editor](https://dev-to-uploads.s3.amazonaws.com/i/70jpeg9lclwai3atb9xa.png)

You can then copy-paste the SQL Schema [available here](https://raw.githubusercontent.com/mikecao/umami/master/sql/schema.postgresql.sql) and click run to create the required tables.

![Supabase SQL Editor](https://dev-to-uploads.s3.amazonaws.com/i/k01u4w7hoxb14ee485p6.png)

# Step 3: Deploy on Vercel

Once the database is created, the easiest way to set it up is to head over to [Umami's documentation](https://umami.is/docs/running-on-vercel) and click the blue **Deploy** button. For the project name, I chose Umami again. When asked to deploy on GitHub, I preferred to make the repository private, but that's up to you.

**Note:** I highly suggest you fork the repository instead, it will be much easier to update later on, since you only need to pull the changes from mikecao's repo.

Once you reach this screen, head back to Supabase.

![Vercel Deployment settings](https://dev-to-uploads.s3.amazonaws.com/i/jva1jj0s9g1pzc0owqhh.png)

On Supabase, go into the Settings, then into the Database tab. There, you'll find the Connection String field. Click on the copy button on the right of it.

![Supabase Database Settings](https://dev-to-uploads.s3.amazonaws.com/i/p51ng9fm71qxcpnad9v1.png)

Back on Vercel, paste the Connection String you just copied, in the `DATABASE_URL` variable. Make sure to replace `[YOUR-PASSWORD]` with the password you created for the project in Step 1. For the `HASH_SALT` variable, it just needs to be a random string of characters, so I used a password generator to get a random string.

![Vercel Deployment Variables](https://dev-to-uploads.s3.amazonaws.com/i/w8e7vhg597q6lmf8wbbl.png)

You can then click on the blue **Deploy** button down on the right. Once the deployment is done, you should get a bunch of confetti on your screen, as well as a blue **Visit** button, which you should click on to go to your Umami dashboard.

# Step 4: Configuring Umami

The first thing you should do is login and change the password. The default username is `admin` and the default password is `umami`. Once logged in, head over to your profile by clicking the account icon up and to the right. Then you can click the **Change password** button in the upper right corner.

![Umami Profile Settings](https://dev-to-uploads.s3.amazonaws.com/i/5jmqf34ynt03jlb0pekf.png)

By the way, you can add as many accounts as you want, so if your friends don't want to set it up, you can create an account for them and they'll be able to use your Umami instance.

# Step 5: Adding Umami to your website

This step is fairly straightforward. Head over to the **Websites** section of the settings and click on **Add website** in the upper right corner. Add the name you want for the website as well as the URL where it can be found. If you want to be able to share the stats publicly ([like this](https://umami.jakobbouchard.dev/share/j4acWw2e/jakobbouchard.dev)), click on the **Enable share URL** checkbox.

![Umami Add Website Box](https://dev-to-uploads.s3.amazonaws.com/i/1qi55fciwj23tjbbf6ao.png)

Once the website is added, click on the **Get tracking code** button, represented by this `</>`. You can then copy the tracking code and place it anywhere you want in your website (usually in the `<head>` tag.)

If you want to use your own domain instead of Vercel's, check out their documentation [right here](https://vercel.com/knowledge/how-do-i-add-a-custom-domain-to-my-vercel-project) about it. It's fairly easy though, it just requires you to add a CNAME record, then adding it to the Vercel dashboard. You'll then be able to use your own subdomain for your Umami instance.

# We're done 🎉

That's it! We're done! You can now add analytics to any of your websites for free* while respecting the privacy of your users. If you want to check out my projects, you can go to my [portfolio](https://jakobbouchard.dev) or my [GitHub](https://github.com/jakobbouchard). *Just saying, at the time of writing, my portfolio is getting remade as I don't like my current one.*

\* Supabase is free for now, but it will become paid in the future. However, if you sign up during the beta you get free credits!

One last thing, if you prefer not hosting it yourself, I highly suggest [Fathom Analytics](https://usefathom.com/ref/XVD48R) (this is an affiliate link, you'll get 10$ off your first invoice.) They're great, I pay for them myself, as I want to compare it to Umami, plus they have some bonus features that I like.

If you have any questions or just want to say hello, leave a comment and I’ll be happy to reply!