Jakob Bouchard

Posted on Feb 2, 2021 • Edited on May 25, 2021

Setting up Umami with Vercel and Supabase

#analytics #firstpost #webdev #tutorial

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.

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.

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

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 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.

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.

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.

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.

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.

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!

Top comments (13)

Argus • Mar 7 '21

Unable to login with password umami for admin user, i get this error :

{"error": {"code": "500", "message": "A server error has occurred"}}

Julian Bustos • Jul 1 '21 • Edited

Mine works for a couple of minutes then it stops working..... but same error 500 Failed to load resource: the server responded with a status of 500 () on the dashboard
and on the tracked website i got this error:
POST https://****.vercel.app/api/collect 500

Tegar Imansyah • May 6 '22

I also got this error. After opening vercel's deployment functions logs, I realized that my generated password is consist of special characters and prisma failed to parse it. After I change my connection string in vercel with percent encoding, it works as expected.

Ref: stackoverflow.com/questions/636841...

Watheq Alshowaiter • Nov 2 '21

in the gatsby plugin gatsby-plugin-umami

  {
    resolve: `gatsby-plugin-umami`,
    options: {
      websiteId: 'UMAMI_WEBSITE_ID',
      srcUrl: 'https://umami.example.com/umami.js',
      includeInDevelopment: false,
      autoTrack: true,
      respectDoNotTrack: true
    },
  },

what should I do to get the websiteId?
and also from I will bring the srcUrl?

I followed along with your tutorial using Vercel and supabase..

Hugo Gomez • Apr 29 '21

Thanks for the post, you have any idea how i can update my umami installation to the latest version? seems like when you deploy to vercel it doesnt "fork" the repository so i cant keep track of the latest changes.

Jakob Bouchard • May 25 '21

Hey! Sorry for the late answer, I must've dismissed the notification by accident.
I'm not sure how to update it if it isn't forked. I also had this issue, and ended up recreating the repo and Vercel project because of that.

Yik San Chan • Feb 3 '21

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

Jakob Bouchard • Feb 3 '21

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.