DEV Community

loading...
Cover image for Setting up Umami with Vercel and Supabase

Setting up Umami with Vercel and Supabase

jakobbouchard profile image Jakob Bouchard ・5 min read

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.

If you don't know what Umami is, it's a new open-source, privacy-focused analytics platform.

From the website itself:

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, 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 and Supabase, 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

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

You can then copy-paste the SQL Schema available here and click run to create the required tables.

Supabase SQL Editor

Step 3: Deploy on Vercel

Once the database is created, head over to Umami's documentation 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.

Once you reach this screen, head back to Supabase.

Vercel Deployment settings

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

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

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

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), click on the Enable share URL checkbox.

Umami Add Website Box

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 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 or my GitHub. 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 (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!

Discussion (5)

pic
Editor guide
Collapse
yiksanchan profile image
Yik San Chan

Hi Jakob, thanks for the good intro. I wonder what are some features missing from umami at this point compared to Fathom? Thanks!

Collapse
jakobbouchard profile image
Jakob Bouchard Author

I’d say private sharing, email reports, disabling tracking for myself so that I don’t skew the stats, and (it’s minor) 2FA support. A WordPress plugin would be nice too probably, but adding it with the code is easy enough.

Collapse
yiksanchan profile image
Yik San Chan

What is private sharing? If you don't mind. Thanks

Thread Thread
jakobbouchard profile image
Jakob Bouchard Author

You can share the stats page, but it requires a password to be seen!

Thread Thread
yiksanchan profile image
Yik San Chan

Ah I see, thanks!