Vinish Bhaskar

May 13 2024

How to get PostgreSQL Database URL & Integrate with Boilerplate

Learn how to quickly get PostgreSQL database URL from Supabase and integrate it seamlessly with your Next.js SaaS Boilerplate in minutes.

How to get PostgreSQL Database URL & Integrate with Boilerplate

In this guide, we will guide you on how to connect your SaaS Boilerplate application seamlessly to a powerful PostgreSQL database using Supabase, a popular backend-as-a-service platform.

You'll have your database up and running in no time!

Why Supabase?

Supabase is an open-source Firebase alternative that provides an all-in-one toolkit for building the backend of your SaaS application! 

Here's why it's the best choice if you are looking for a PostgreSQL database URL to integrate with your boilerplate or templates.

  • Effortless Setup of a Powerful PostgreSQL Database
  • Built-in Authentication for User Management
  • Real-Time Data Synchronization
  • Automatic API Generation for Easy Integration
  • Offers Free Tier and Scalability
  • Open Source and Community-Driven

In summary, Supabase is an excellent choice for developers looking for a hassle-free way to integrate a PostgreSQL database into their Next.js Boilerplate applications.

Steps to Integrate Database

Ready to connect your boilerplate or template to a PostgreSQL database? Let's dive into the step-by-step guide:

1. Create a Supabase Account: If you're new to Supabase, visit the Supabase website and create a free account. It's quick and easy!

blog image

2. Create New Project: Once logged in, create a new Supabase project. Click on "New Project" to create.

blog image

3. Project Name and Password: Provide the project name and generate the password. Remember to copy it; we'll need it in the upcoming step.

blog image

After that, It will be provisioning the database and API endpoints. This may take a few minutes

4. Connect to your project: Click the "connect" button on the project dashboard page. Get the connection strings and environment variables for your app.

blog image

5. Get PostgreSQL Database URL: Upon clicking "connect," a popup with various connection options will display. Locate the "Database connection String," which will look something like this:

blog image
postgres://your_username:your_password@your_host:5432/your_database

Copy the entire connection string. We'll use it in the next step.

6. Set Your Environment Variable: Open your Boilerplate/ Template project folder and Locate the .env file.

Within the .env file, locate the following line and update it with your actual connection string (copied in Step 5). Also, replace the password placeholder with the actual password from Step 3:

DATABASE_URL="your_db_connection_string"

That's it, Now ready to migrate the schema.

Migrate the Schema

Now, let's proceed with the steps:

1. Navigate to the SaaS Boilerplate/ Template project's root directory in your terminal.

2. Run the following command to create the necessary tables in the Supabase PostgreSQL database based on the Prisma schema:

npx prisma db push

3. To interact with the database, we need the Prisma client. Run the following command to generate it:

npx prisma generate

This is it, and we are now done with Database integration.

Important Note: Remember, whenever you update your Prisma schema (the file that defines your database models), you'll need to run npx prisma generate again to keep the Prisma Client in sync with your changes.

You're Done!

That's it! You've successfully connected your SaaS Boilerplate application to a Supabase PostgreSQL database. Now, you can integrate other features that require data storage and retrieval.


Related Blog Posts

Maecenas et nunc tellus wed eu elit odio quisque sed libero finibus, posuere metus vel

blog-image
Vinish Bhaskar

May 14 2024

How to integrate Cloudflare R2 Bucket with Boilerplate and Template

Learn how to seamlessly integrate Cloudflare R2 Bucket with your SaaS Boilerplate for secure and scalable file storage.

blog-image
Vinish Bhaskar

May 12 2024

How to Integrate Sanity with Next.js Template or Boilerplate

Learn how to seamlessly integrate Sanity CMS with your Next.js SaaS Boilerplate. Create a streamlined content workflow.

blog-image
Vinish Bhaskar

Jun 01 2024

How to integrate Algolia with SaaS Boilerplate and Template

Learn how to seamlessly integrate Algolia search into your SaaS boilerplate for improved search relevancy and performance.

blog-image
Vinish Bhaskar

May 17 2024

How to Integrate Email API into Next.js Boilerplate or Template

Learn how to seamlessly integrate email functionality into your SaaS boilerplate/template using Resend SMTP's powerful API. Effortlessly send transactional Emails.

blog-image
Vinish Bhaskar

Jun 12 2024

How to Quickly Deploy SaaS Boilerplate and Template on Vercel

Speed up your SaaS launch! Learn how to deploy your SaaS Boilerplate on Vercel quickly and effortlessly with this step-by-step guide.

blog-image
Vinish Bhaskar

May 13 2024

How to integrate Mailchimp with Boilerplate or Templates

Learn how to seamlessly integrate Mailchimp into Next.js Boilerplate/Template, enabling you to create, send, and track effective email marketing campaigns.

blog-image
Vinish Bhaskar

May 15 2024

How to Integrate NextAuth.js with Next.js Boilerplate and Template

Simplify authentication in your templates and SaaS Boilerplate! Learn how to effortlessly integrate NextAuth with Google and GitHub login, including passwordless magic links.