Umami for free?

As you may already know, or not. I'm self-hosting a view apps, where it doesn't mean home-labbing them. My flat wasn't designed to have network cables in all rooms, and storing more units than Synology NAS, HomeAssistant, RasbberyPi and Router on a tiny Ikea shelf could be a dangerous situation. That is why I'm not using my mini-pc as a homelab anymore.

In the beginning, I moved a lot of my services to Hetzner (take a look at previous posts). Now after a while, I started thinking about making more for less. During the vibe coding wave, I learned how to use Supabase and Vercel. Then I started thinking about one crazy thing.

Can I host Umami on Vercel and Supabase for free?

At the end of March, some free time appears. That is why you my friend can read this blog post!

What is Umami, Vercel or Supabase?

Let's rely on the provided documentation/marketing slogans.

Umami

Umami makes it easy to collect, analyze, and understand your website data — so you can focus on growth

Basically Umami is open-source tool that allows us - content creators collect data about our users. For example, I like to track the way users come to my blog or most popular articles, so I can modify pinned ones. Also, it's focused on privacy. For example, user data are analyzed by default, also there is no cross-site tracking, so umami tracks users only on a particular website.

Dashboard view, with my blog's stats

Vercel

Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web.

Vercel is a full CI/CD platform, that provides infrastructure and whole more for your projects. It's expensive when you're bigger, but on my scale the price is great - 0$! Also, they are responsible for next.js, so we can consider them as solid brands. To be totally honest I'm really impressed by their CI/CD system, it works really good for standard apps!

Supabase

Supabase is an open source Firebase alternative. Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings.

Yes, the Supabase description could be not easy to understand. It's become much more clear when you start using it. Let's say it that way, as Vercel is for hosting the frontend, Supabase will handle your backend. Small Postgresql database, edge functions, also auth to your app, s3-like storage, etc.

Example

For example, you can take a look at my security scanner. It was built entirely with the usage of Vercel as web app hosting, Supabase as database(for report storing), and place where my Deno's functions are living - serverless part!

Let's start then

1. Start with Vercel, the only thing is that we need to open an account there.

   Vercel singin options

   As you can see, they do not provide Google/Facebook auth options, fortunately we can just use the email/login method.

2. Next we need to create our first project.

   To achieve that, you need first click Add New on your project dashboard.

   Create a new project with Vercel

3. After that we need to configure a connection with GitHub, or another VCS server.

   New project view

   But hey! We don't have any projects yet. Let's fix it now.

4. Go to the GitHub page and fork the offical repository.

   Just fork the repo here

   Great, now we're almost done.

   Let's see Vercel's magic in action.

5. Back to the project page, and choose your fork.

6. Just click deploy.

   Project deploy view

   A. You can change the name of the project (but why?)

   B. Auto-detected framework.

   C. Some boring settings.

   D. Like the Deploy button, just do it!

7. And... bum! Errors.

   Initail deploy log

   At this stage, we need a database. It's not that simple right? Vercel is not such smart yet. In the beginning, I thought about Supabase, however I noticed that Vercel has something called Storage.

   Read and write directly to databases and stores from your projects

   Let's use it then for our application.

8. Create a database.

   Create new Storage button

9. Choose a database type.

   Mark database provider of choice

   Here we can choose multiple providers, Supabase as well. Just out of curiosity, I decided to Neon - a serverless version of Postgresql. Just to check if it will work as expected. You can choose whatever you want. After that find your region, as well as Installation Plans, where the recommended version is ehm, Free.

10. Connect our database.

    1. Go to Storage tab.
    2. Click Connect Project.
    3. Search for your project and choose it.
    4. Click Connect.
    5. Now you should see something like this:

    View of connected database

    Now, your app should be fully connected.

11. Redeploy the app.

    1. Overview -> Project name pane -> Deployments.
    2. Choose the first build and hit Redeploy

    Just redeploy the application

12. After a while you should see a similar screen to the below one:

    Succesfull deployment

    1. Here you see the deployment status - Ready
    2. As well as the page URL, in my case https://umami-6n48.vercel.app/, just hit it!

Summary

As you can see, you can access your instance of Umami. Initial login, will require some credentials, remember to change them!

• username: admin
• password: umami

What's the result of this project? Up and running self-hosted an instance of Umami, for free, able to handle analytics at least for 5 different pages, I'm currently running. Why it could be a good move? The ability to learn new things is always good. As it's a self-managed app, you don't need to worry about the price change, also Vercel stability for sure will be better than a regular production-like environment, where you still testing a lot of things. The most important thing is that you don't need to use Google Analytics if you want to use website analytics for free and avoid services provided by Google.