Serverless Web Analytics with Umami, Vercel and Neon

Learn the basics of Cloudflare Workers and how to deploy your first serverless function.

Serverless Web Analytics with Umami, Vercel and Neon

We wanted to setup basic web analytics on our website tracking page visits and giving high level insights about our visitors without using Google Analytics or any of the other major analytics solutions, primarily so that there are no cookies and we don’t have to display a cookie consent form to comply with GDPR. We really didn’t want the cookie consent form since we don’t use cookies for any real reason otherwise.

So after some research we came upon Umami, an open-source analytics platform that works without cookies, is privacy friendly, while giving more that enough features that we were looking for. We decided to go the self-hosting route, setting up a single instance we can then later use to create and track multiple websites.

While we initially wanted to deploy to Cloudflare Developer Platform, this time we hit limits since it is not directly supported on the platform, and we couldn’t get to building and testing the integration ourselves (for now!).

Instead we decided to use Vercel as our serverless hosting (since Umami is a Next.js app, so Vercel makes the easiest pick) and Neon as our serverless database. Both of these have a free tier making it easy for anyone to experiment with it, so we gave it a shot.

Here’s how to setup a completely serverless custom analytics solution using Umami, Vercel and Neon.

Prerequisites

  • A GitHub account
  • A Vercel account (free tier is fine)
  • (Optional) A Neon account if you prefer manual DB provisioning

Fork & Import Umami into Vercel

  • Fork the official repo:

https://github.com/umami-software/umami → click “Fork”

  • In Vercel, click New Project → Import Git Repository and pick your fork.
  • Choose the Next.js preset and add APP_SECRET environment variable
  • First generate a long random string
openssl rand -base64 32
  • Add in the value to your secret.

Let Vercel do its first (failing) build.

Custom domain

If you want to add a custom domain, goto project’s “Settings” > “Domains” and click on Add Domain. Add your domain in the popup and set the CNAME as per instructions in your DNS provider.

Connect Neon Serverless Database

  • Click on “Storage” tab in your Vercel project
  • Click on “Create Database”
  • Select “Neon” and click “Continue”
  • Choose your preffered region, disable Auth and select your appropriate plan (free plan works fine!)
  • Click “Continue” and give your new database a friendly name and click on “Create”
  • Click on “Done”, and then in the new popup leave the default settings and click “Connect”

This will generate the Neon database and insert it’s environment variables (DATABASE_URL) in the environment. You can skip these steps if you have created a Neon database (or using another database provider) and just set the DATABASE_URL environment variable to the right connection url.

Rebuild

At this stage, all we need to do is a rebuild of the application, which should succeed since the missing DATABASE_URL environment is now present.

  • Goto the “Deployments” tab, click on the ”…” option and select “Create Deployment”
  • Click on the “master” tag and wait for it to load
  • Once ready, click on the “Create Deployment” button to begin your deployment

First login

  • Once the build finishes, click on the Domain to open Umami in a new tab
  • Use the default credentials to login
username: admin
password: umami
  • After login, click on your profile and immediately change your password!

First website

  • Goto Settings and click on “Add Website”
  • Enter the name and domain of the website
  • Click on “Edit” and click on the “Tracking code” tab
  • Update your website with the tracking code, and the events should start flowing into the admin panel

If you have high volume of traffic, it might be cheaper to not use Vercel or Neon. One way would be to host on a cloud provider yourself and not paying the surcharge of Vercel/Neon. If you need any such help, feel free to contact us and we can help you build the platform for your scale!

Need implementation help?

Our team of experts can help you implement these solutions for your specific use case.