Self-hosted analytics with umami on Vercel

vvo

Vincent Voyer

Posted on August 20, 2020

Self-hosted analytics with umami on Vercel

EDIT Sep 4, 2020 After having stability issues with self-hosted Umami. I decided to use Fathom Analytics and have been happy about it since then. I especially like the automated weekly email report on all my websites. Get $10 off by using my link: https://usefathom.com/ref/Y8XVBV.


Umami is a self-hosted open-source alternative to Google Analytics. It provides simple and fast website analytics for your projects. It is built with Next.js and can run on MySQL or PostgreSQL. I believe it's a recent project and you can read more on the associated Hacker News discussion: https://news.ycombinator.com/item?id=24198329

Here's how it looks:

Screenshot of an example umami dashboard

You can even share public pages of your analytics!

I just started releasing products like Next.js News and wanted to have some information on the people visiting my website.

So far the products I knew about were:

I am ready to pay for services, but the idea of having a self-hosted analytics service that was good enough was interesting. So let's see how to install umami on Vercel.

1. Create a database

For Umami to work, you need a database. I went for the latest version of PostgreSQL on an AWS t2.micro which fits their free tier. But use whatever you want.

2. Create the necessary database tables

Use the provided SQL dumps:

  • schema.postgresql.sql
  • or schema.mysql.sql

You can find them here: https://github.com/mikecao/umami/tree/master/sql. It will also create the first user.

I use https://tableplus.com/ to connect to my local or production databases and execute queries on them.

3. Create a new project on Vercel

Directly import the project from https://github.com/mikecao/umami, Vercel will fork it on your GitHub account.

Screenshot of Vercel's new project window

4. Configure the Vercel project

Change the build command for: npm run build-postgresql-client && npm run build if you're using PostgreSQL. Or npm run build-mysql-client && npm run build if you're using MySQL.

Add two environment variables:

  • HASH_SALT, used to encrypt passwords in umami database. It should contain a random string. You can generate good ones with 1password's strong password generator
  • DATABASE_URL, It's the full url to access your database. It should look like this: postgresql://dbuser:dbPassword@dbHost[:dbPort]/dbName

This is all you need, for details you can have a look at umami's install documentation.

Now you can click on deploy!

5. Login to the umami UI

Go to your newly created Vercel application and login with:

  • user: admin
  • password: umami

Change your password immediately.

6. Add websites

Now you can add some websites, get the tracking code, add it to your code annnnd DONE. You now have a fully functional self-hosted analytics that looks good and is sufficient for a start.

PS: Since what is deployed is a fork, you will have to update your fork to benefit from umami new features. See GitHub documentation on how to sync a fork.


Thanks for reading!

If you enjoyed this post, follow me on twitter at @vvoyer and share the article for your followers.

💖 💪 🙅 🚩
vvo
Vincent Voyer

Posted on August 20, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related