Self-Hosting Umami Analytics: A Complete Guide to Deploying with Vercel and Supabase for Free

What is Analytics

Analytics is the process of collecting and analyzing data about how visitors interact with your website. This information is crucial because it allows you to make informed decisions to improve your website.

Google Analytics is a great choice but there could be data privacy as well as GDPR compliance concerns.

When choosing an analytics tool, it's important that it:

• is free (open source)


• allows self hosting (no vendor lock in)


• is GDPR compliant


• is light weight & fast

Umami Analytics checks all these boxes.

Umami Analytics : An open source analytics solution

2. Initial Configuration for Supabase

• Select the project, navigate to SQL editor


• Copy the SQL scripts provided in the
  
  
  
  
  
  • Paste it on the SQL editor and click on run
  
  
  
  
  
  
  
  
  
  • Navigate to Project Settings → Database → Connection String → Copy Connection URL
  
  
  
  
  

  project to your GitHub account.



• 
  

  Edit db/postgresql/schema.prisma file (add directUrl)
  
  

  
  
  CODE Kopieren

  datasource db {
  
    provider     = "postgresql"
  
    url          = env("DATABASE_URL")
  
    directUrl    = env("DIRECT_DATABASE_URL")  //add this line
  
    relationMode = "prisma"
  
  }
  
  

  
  
  

4. Deploy on Vercel

• Go to Dashboard on Vercel and create new project


• From the dashboard page click Import Project then specify the URL to your fork of the project on GitHub.


• Before clicking on Deploy add the following environment variables
  

DATABASE_URL = postgres://[user]:[password]@aws-0-[aws-region].pooler.supabase.com:6543/postgres?**pgbouncer=true&connection_limit=1**

DIRECT_DATABASE_URL = postgres://[user]:[password]@aws-0-[aws-region].pooler.supabase.com:**5432**/postgres

Important!!

💡 DATABASE_URL is same as the Connection Url copied from supabase (in step 2) but you have to add ?pgbouncer=true&connect_timeout=1 at the end of Url

💡 DATABASE_URL is same as the Connection Url copied from supabase (in step 2) but you have to replace the port from 6543 to 5432

• After that click on deploy

5. Resolving Error “The database Schema is not empty”

• In step two we did run a sql script in Supabase which created few tables in the database. Now when script is run during deployment it throws an error with error code P3005 saying Database schema is not empty
  


• To resolve this, clone your forked repository in your local and add the same environment variables as mentioned above (in step 4)


• 
  

  Now run the following commands (to install dependencies and setup db connection)
  
  

  
  
  CODE Kopieren

  yarn install
  
  yarn build-db
  
  

  
  
  



• Then we would create a

  
  
  
  
  
  • Once website is added navigate to settings → website → your website name → edit → tracking code. Copy the tracking code.
  
  
  
  
  

  
  
  
  8. Add tracking code to your project
  

  
  
  

  In Next.JS projects to load a

  
  
  

  
  
  
  Conclusion
  

  
  
  

  Hope with help of this article you will be able to set up analytics for your application quickly and easily, without relying on third-party services. Since Vercel and Supabase both provides generous free tier, you can run your analytics for free in the initial days while being GDPR compliant.

  
  
  

  
  
  
  About Invoizly
  

  
  
  

  on Unsplash

  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen