
Hi, I'm Russell and welcome to my blog! I'm a certified Web developer using modern technologies including NextJs, ReactJs, Html5, Css3, Javascript, wordpress, SEO and more. I'm currently building my saas application for the ESG space and can provide valuable lessons I have learned on the way to production. I have created this blog to share my knowledge, insights and opinions on latest web development trends and technologies and provide useful resourse like tutorials and free templates to help you grow your business or career.

I encourage you to signup to my newsletter to recieve notifications of new posts and resources.
If you have any questions or need help with anything, feel free to reach out to me on [email](mailto:saasvial@gmail.com)


Giving you your daily dose of SaaS knowledge and insights.

Russell

An in-depth look at the features and benefits of the Makerkit SaaS Starter Kit for aspiring SaaS developers.

MakerKit review 2024: Nextjs App Template (Saas Starter Kit)

Building a successful SaaS application can be a daunting task, often requiring extensive time and resources to set up fundamental functionalities such as authentication, billing, and user management. Ontop of this there is no garentee that your application will even be used so why create everything from scratch. This is where Supastarter comes in. Supastarter is a comprehensive starter kit designed to simplify and accelerate the development of SaaS applications using popular frameworks like Next.js and Nuxt.

Whether you’re an indie hacker or an experienced developer, Supastarter provides a robust, production-ready foundation for your project. With built-in features such as multi-tenancy, customizable UI components, and seamless integration with essential tools, Supastarter aims to handle the repetitive aspects of SaaS development, allowing you to focus on what truly matters – your core business logic.

In this review, we’ll delve into the capabilities of Supastarter, exploring its setup process, key features, and technical architecture. We’ll assess its performance, SEO optimization, and overall user experience to provide you with a thorough understanding of what Supastarter has to offer. By the end of this review, you’ll have all the information you need to determine whether Supastarter is the right tool for your next SaaS project.

## Ease of Use and Setup

Supastarter shines in its ease of use and setup process, making it an attractive choice for developers of all experience levels. The comprehensive documentation provides clear, step-by-step instructions for setting up your project, ensuring a smooth start.

With its straightforward installation process, you can have Supastarter up and running within minutes. The well-organized CLI guides you through necessary configurations such as project naming and database connections, reducing the complexity often associated with setting up a new SaaS application.

## Features and Functionality

Supastarter offers a robust suite of features designed to streamline the development of SaaS applications. Here’s an in-depth look at its core functionalities:

Supastarter offers a robust suite of features designed to streamline the development of SaaS applications. Here’s an in-depth look at its core functionalities:

- **Authentication** - Supastarter includes a comprehensive authentication system supporting multiple methods: email/password, magic link, and social logins. These options ensure secure and flexible user authentication.

- **Payments** - Managing billing and subscriptions is seamless with built-in integrations for Stripe and Lemonsqueezy. These payment processors provide flexibility and ease in handling customer payments.

- **Multi-Tenancy** - Supastarter is built with multi-tenancy in mind, offering out-of-the-box support for multiple teams and user roles. The features are easily customizable to fit the specific needs of your application.

- **Super Admin Panel** - An intuitive admin panel is included, allowing for efficient user and team management. Admins can also impersonate users to provide better support and troubleshoot issues.

- **SaaS Onboarding Flow** - Streamline the user onboarding process with customizable flows. This includes gathering additional user data during onboarding and simplifying the process for users to create their first team.

- **AI Integration** - Leverage the power of AI with built-in support from Vercel’s AI SDK. This integration offers ready-to-use AI functionalities to enhance your application.

- **Internationalization** - Make your application accessible globally with built-in i18n support. Easily add multiple languages to improve user experience for a global audience.

- **SaaS Landing Page and Blog** - Supastarter includes pre-built pages to enhance your product’s online presence. This features a customizable landing page to showcase your product’s features, pricing, and capture leads, along with an MDX-based blog setup to keep your customers informed.

- **Customizable UI** - Built on Tailwind CSS and Radix UI, Supastarter’s UI is fully customizable. It also supports shadcn/ui for fast UI development and includes a dark mode for a modern look.

- **Storage and File Uploads** - Effortlessly handle file storage with support for multiple providers, including Supabase Storage and S3-compatible services like Cloudflare R2.

- **Analytics and Tracking** - Integrated analytics help you understand user behavior. Easily connect with your favorite analytics provider to gain insights into your application’s performance.

- **Serverless Functionality** - Supastarter leverages serverless architecture for scalability, eliminating the need to manage or scale backend infrastructure manually.

- **API and Database** - Supastarter provides a flexible and scalable backend with trpc for a flexible API layer and Prisma ORM for database management, supporting PostgreSQL, MySQL, MongoDB, and more.

- **Additional Features** - Includes a newsletter signup component, type-safe API to frontend integration, custom emails with react-email, a powerful CLI for quick setup, and extensive documentation to guide you through every step.

With these features, Supastarter provides everything you need to launch a fully functional, scalable SaaS application quickly and efficiently, allowing you to focus on building unique features that set your product apart.

## Performance and Scalability

<img className="w-full" alt="supastarter performance" src="https://res.cloudinary.com/dwumgnsux/image/upload/v1718256575/saasvial/ceubyarg5rv5jepqlgil.webp"/>

Supastarter is designed with performance and scalability in mind, ensuring your SaaS application runs smoothly and can handle growth effectively.

**Speed and Responsiveness** - Supastarter leverages Next.js and Nuxt to deliver fast-loading, responsive applications. The use of Tailwind CSS and Radix UI further enhances performance by optimizing styles and components for speed.

**Scalable Architecture** - Supastarter’s serverless architecture allows for seamless scalability, ensuring your application can handle increased traffic and user demand without compromising performance.

**TurboRepo Integration** - Supastarter leverages TurboRepo to streamline your development workflow. TurboRepo allows for efficient management of your codebase, enabling faster builds and better performance through incremental builds and caching.

**Regular Updates** - Supastarter is regularly updated with new features and improvements, ensuring your application stays up-to-date with the latest technologies and best practices.

By prioritizing performance and scalability, Supastarter provides a solid foundation for building high-quality SaaS applications that can grow with your business and deliver a seamless user experience.

### Real-World Performance

In real-world applications, Supastarter has demonstrated excellent performance and scalability. Here are some examples of how it achieves this:

- **High Performance Scores**: Supastarter consistently achieves high scores in performance benchmarks, thanks to its use of modern web technologies and optimization techniques.
- **Responsive UI**: The use of Tailwind CSS and Radix UI ensures a responsive and fast-loading user interface, enhancing user experience across devices.
- **Community and Support**: Supastarter’s active community and comprehensive documentation provide continuous support and updates, ensuring your application stays performant and up-to-date with the latest technologies.

### SEO Optimization

In addition to performance, Supastarter is built with SEO best practices in mind:

- **Meta Tags and Schema Markup**: Supastarter includes SEO-friendly meta tags and schema markup, helping search engines better understand and rank your content.
- **Fast Load Times**: Improved load times contribute to better SEO rankings, as search engines prioritize fast-loading websites.
- **Mobile Optimization**: Fully responsive design ensures your application performs well on mobile devices, a key factor for search engine rankings.

By combining robust performance features with scalability and SEO optimization, Supastarter provides a solid foundation for building SaaS applications that can grow with your business and deliver a seamless user experience.

## Security and Compliance

Security and compliance are critical considerations for any SaaS application. Supastarter is designed with robust security features and compliance measures to ensure your application and user data are protected.

### Security Features

Supastarter incorporates several security mechanisms to safeguard your application:

- **Authentication and Authorization**:

 - **Secure Authentication**: Supports secure authentication methods, including email/password, magic links, and social logins, ensuring that user credentials are handled safely.
 - **Role-Based Access Control (RBAC)**: Implements RBAC to control user access to various parts of the application, ensuring that users only have access to the resources they need.

- **Data Protection**:

 - **Encrypted Data Storage**: Utilizes encrypted storage solutions to protect sensitive data at rest.
 - **Secure Data Transmission**: All data transmitted between the client and server is encrypted using HTTPS, preventing interception by unauthorized parties.

- **Vulnerability Management**:

 - **Regular Security Updates**: Supastarter’s dependencies are regularly updated to mitigate potential security vulnerabilities.

- **Authentication Libraries**:
 - **Lucia Auth**: A secure and flexible authentication library is integrated to handle various authentication scenarios securely.

### Compliance

Supastarter helps ensure your application meets various compliance requirements, which are crucial for building user trust and adhering to legal standards:

- **GDPR Compliance**:

 - **Data Privacy**: Implements data privacy measures to comply with GDPR requirements, such as user consent for data collection and the ability for users to request data deletion.
 - **User Data Control**: Provides users with control over their data, including options to view, download, and delete their personal information.

- **PCI-DSS Compliance**:

 - **Secure Payment Processing**: Integrates with PCI-DSS compliant payment gateways like Stripe and Lemonsqueezy to ensure secure handling of payment information.
 - **No Direct Storage of Payment Data**: Payment data is never stored directly on your servers, reducing the risk and complexity associated with PCI-DSS compliance.

## Pricing and Value for Money

### Transparent Pricing

Supastarter offers clear and straightforward pricing plans designed to provide excellent value for developers and teams. The two main plans, Next.js Plan and Nuxt Plan, are priced at $299 each, offering lifetime access to all features and updates.

| | **Next.js Plan** | **Nuxt Plan** |
| ------------- | ------------------------------------------------- | ------------------------------------------------- |
| **Price** | $299 (Lifetime) | $299 (Lifetime) |
| **Ideal For** | Teams + Individual developers | Teams + Individual developers |
| **Features** | - Next 14 (app router) | - Nuxt 3 |
| | - Multiple authentication methods + social logins | - Multiple authentication methods + social logins |
| | - Internationalization (i18n) | - Internationalization (i18n) |
| | - Billing and subscription management | - Billing and subscription management |
| | - Landing page | - Landing page |
| | - Blog | - Blog |
| | - Fully customizable | - Fully customizable |
| | - Saves you 40+ hours | - Saves you 40+ hours |
| | - Lifetime access to updates | - Lifetime access to updates |

### Value for Money

**Comprehensive Features**: Supastarter includes a vast array of pre-built features such as authentication, multi-tenancy, payment processing, blogging, and documentation, significantly reducing development time and effort.

**Lifetime Access**: With a one-time payment, you gain lifetime access to all updates and new features, ensuring your investment continues to pay off as Supastarter evolves.

**Unlimited Projects**: Both the Next.js and Nuxt starter kits allow for unlimited projects, making Supastarter a highly cost-effective solution for developers working on multiple applications.

**Regular Updates**: Supastarter is regularly updated to incorporate the latest features and security patches, keeping your application current and secure without any additional costs.

**Community and Support**: Join the active Supastarter community for support and networking. The Teams Plan also offers private chat support for more personalized assistance, enhancing your development experience.

### Cost Savings

By using Supastarter, developers report significantly reducing their development time, translating to substantial cost savings. The pre-built features and solid architecture mean you can concentrate on building your unique value proposition rather than starting from scratch.

Supastarter's pricing structure and comprehensive feature set offer exceptional value for money, making it an excellent choice for developers and teams looking to build high-quality SaaS applications efficiently and cost-effectively.

## Drawbacks of Supastarter

Despite its many advantages, Supastarter isn’t without its limitations. Here are a few considerations to keep in mind:

**Learning Curve** - For developers new to Next.js, Nuxt, or the various tools integrated within Supastarter, there might be a learning curve involved. While the documentation is comprehensive, it can still be challenging for beginners to navigate and fully utilize all features.

**Overhead for Smaller Projects** - For very small, simple projects, the comprehensive nature of Supastarter might introduce more overhead than necessary. The extensive feature set, while beneficial for larger projects, could complicate development efforts for smaller applications that do not require all of Supastarter’s functionalities.

**Initial Cost** - Supastarter requires an upfront payment for lifetime access. While this can be cost-effective in the long run, the initial investment of $299 might be a barrier for some developers or small teams working with limited budgets.

## Supastarter vs. Makerkit vs. ShipFa.st: A Comparison

When it comes to choosing a SaaS starter kit, developers have several options available, each with its own set of features and benefits. ShipFa.st, Makerkit, and Supastarter are three popular choices that cater to different development needs and preferences. Let’s compare these starter kits across various aspects to help you make an informed decision:

This table compares the different plans available for Makerkit, ShipFa.st, and Supastarter. Each plan offers a variety of features and support options tailored to meet the needs of different developers and teams.

| Plan Details | Supastarter | Makerkit (Pro Plan) | Makerkit (Teams Plan) | ShipFa.st (Starter Plan) | ShipFa.st (All-in Plan) |
| ------------------------------- | --------------------- | --------------------- | ----------------------- | ------------------------ | ----------------------- |
| **Price** | $299 one-time payment | $299 one-time payment | $599 one-time payment | $169 one-time payment | $199 one-time payment |
| **Unlimited Projects** | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| **Lifetime Updates** | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| **Repository Users** | 1 user | 1 user | Unlimited collaborators | 1 user | 1 user |
| **Community Support** | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| **Private Chat Support** | ❌ | ❌ | ✔️ | ❌ | ❌ |
| **Plugins** | ✔️ | ✔️ | ✔️ | ❌ | ❌ |
| **Premium AI Codebases Access** | ❌ | ❌ | ✔️ | ❌ | ❌ |
| **Remix Version** | ❌ | ✔️ | ✔️ | ❌ | ❌ |
| **Nextjs Version** | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| **Nuxt Version** | ✔️ | ❌ | ❌ | ❌ | ❌ |
| **Supabase Support** | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| **Firebase Support** | ❌ | ✔️ | ✔️ | ❌ | ❌ |
| **MongoDB** | ✔️ | ❌ | ❌ | ✔️ | ✔️ |
| **Lemonsqueezy** | ✔️ | ✔️ | ✔️ | ❌ | ❌ |
| **Paddle** | ❌ | ✔️ | ✔️ | ❌ | ❌ |
| **Stripe** | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |

Read our Review of Makerkit [here](https://saasvial.com/makerkit-saas-starter-kit-review).

## Conclusion

Overall, Supastarter offers exceptional value for money, making it an excellent choice for developers and teams looking to build high-quality SaaS applications efficiently and effectively. With its rich documentation and active community, Supastarter provides the support and resources needed to accelerate your development process and create scalable, secure, and performant applications.

With the use of Supastarter you are garanteed to save time and money on your next project.

An in-depth look at the features and benefits of the Supastarter SaaS Starter Kit for aspiring SaaS developers.

Supastarter Review 2024: Next.js and Nuxt SaaS Starter Kit

A complete guide on setting up and deploying Makerkit SaaS boilerplate from local development to production using Supabase and Cloudflare. This guide is not a replacement to the official documentation but a simplified version to help you get started quickly. Please always refer to the [official documentation](https://makerkit.dev/docs/next-supabase-turbo) for the most up-to-date information .

## Prerequisites

To follow this guide, you need the following tools and software installed on your machine:

1. Node.js 18.x or later - [Download Node.js](https://nodejs.org/)
2. Docker - [Download Docker](https://www.docker.com/products/docker-desktop/)
3. Pnpm - [Install Pnpm](https://pnpm.io/installation)
4. Supabase Account - [Sign up for Supabase](https://supabase.com)
5. Cloudflare Pages - [Sign up for Cloudflare Pages](https://pages.cloudflare.com)
6. Access to Makerkit Github Repo - [Get Makerkit](https://makerkit.lemonsqueezy.com?aff=MKl59)

## Local Setup

The local setup provides us with a development environment to test and make changes to the boilerplate before deploying to production. In this guide we will not setup mail providers, payment processors, or other services. We will only focus on the minimal setup and deploy it to Cloudflare.

1. **Clone the Repository**

 This command clones the repository using SSH:

 ```bash
 git clone git@github.com:makerkit/next-supabase-saas-kit-turbo.git <your-project-name>
 ```

 If you don't have SSH setup, use HTTPS:

 ```bash
 git clone https://github.com/makerkit/next-supabase-saas-kit-turbo <your-project-name>
 ```

2. **Navigate to the Project Directory**

 ```bash
 cd <your-project-name>
 ```

3. **Remove the Original Origin**

 ```bash
 git remote rm origin
 ```

4. **Add Upstream Repository**

 ```bash
 git remote add upstream git@github.com:makerkit/next-supabase-saas-kit-turbo
 ```

5. **Pull Updates from Upstream**

 ```bash
 git pull upstream main
 ```

6. **Install Dependencies**

 ```bash
 pnpm install
 ```

7. **Add Your Repository**

 - Create a new GitHub repository.
 - Link your local repository to the new GitHub repository:
 ```bash
 git remote add origin git@github.com:your-username/<your-repo-name>.git
 git branch -M main
 git push -u origin main
 ```

8. **Start Docker**

 At this point you want to make sure Docker is running on your machine. The boilerplate uses Docker to run Supabase locally. Now that docker is running lets start the Supabase service:

 ```bash
 pnpm run supabase:web:start
 ```

 You should see a result like this if the service started successfully:

 ```plaintext
 API URL: http://127.0.0.1:54321
 GraphQL URL: http://127.0.0.1:54321/graphql/v1
 S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
 DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
 Studio URL: http://127.0.0.1:54323
 Inbucket URL: http://127.0.0.1:54324
 JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
 anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
 service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
 S3 Access Key: 625729a08b95bf1b7ff351a663f3a23c
 S3 Secret Key: 850181e4652dd023b7a98c58ae0d2d34bd487ee0cc3254aed6eda37307425907
 S3 Region: local
 ```

 \*Take note of your service role key as you will need it in the next step.

9. **Create `.env.local` File**

 - If you have'nt already opened the project in your code editor, do so now.
 - Navigate to `apps/web` directory.
 - Create a `.env.local` file and add your Supabase service role key:
 ```plaintext
 SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
 ```

10. **Start the Development Server**

 ```bash
 pnpm dev
 ```

11. **Sign in with Makerkit Test Account**
 - Email: `test@makerkit.dev`
 - Password: `testingpassword`

Congratulations! You have successfully set up the Makerkit SaaS boilerplate locally.

## Link and Push to Remote Supabase

1. **Sign into Supabase and Create a New Project**

 - Add a project name
 - Add a password
 - Copy and save the password
 - Select the region closest to you

2. **Copy and save these Supabase Project Details**

 - Anon public key
 - Service role key
 - Project URL

3. **Link Local Project to Remote Supabase**

 ```bash
 pnpm --filter web supabase link --project-ref <your-project-ref>
 ```

 - You can find your project ref ID in the Supabase dashboard on the project settings page.
 - You may be required to login to your Supabase account to create an access token.
 - When prompted, enter your project database password.

4. **Push to Supabase**

 This command will push the database schema to your remote Supabase project.

 ```bash
 pnpm --filter web supabase db push
 ```

5. **Verify Success on Supabase Dashboard**

Log in to your Supabase dashboard and navigate to table editor and verify that the tables have been created successfully.

## Cloudflare Setup

1. **Opt into Edge Runtime, Downgrade Supabase Auth and insert cloudflare scripts**

 - Navigate to `apps/web/app/layout.tsx`
 - Add the following line:
 ```javascript
 export const runtime = "edge";
 ```
 - Place this override in the **root** package.json file:
 ```json
 "pnpm": {
 "overrides": {
 "@supabase/auth-js": "2.62.0"
 }
 }
 ```
 - Add Scripts to `apps/web/package.json`

 ```json
 "scripts": {
 "cloudflare:build": "pnpm dlx @cloudflare/next-on-pages",
 "cloudflare:preview": "pnpm dlx wrangler pages dev .next --compatibility-flag=nodejs_compat"
 }
 ```

 - Push the changes to your repository.

2. **For testing Cloudflare Setup Locally (Optional)**

Please refer to the [official documentation](https://github.com/cloudflare/next-on-pages/tree/main/packages/next-on-pages#3-deploy-your-application-to-cloudflare-pages) for more information on installing the cloudflare CLI.

Once you have the CLI installed, you can run the following commands to test the cloudflare setup locally:

- Build a preview:
 ```bash
 pnpm run cloudflare:build
 ```
- Run the preview:
 ```bash
 pnpm run cloudflare:preview
 ```

## Deploy on Cloudflare

1. **Navigate to Cloudflare Pages**

 - Click Create an application.
 - Choose the pages tab.
 - Connect to your GitHub and select a repository.
 - Choose a project name (this will make up your site url `https://project-name.pages.dev/` )
 - Set the framework preset to Next.js. (this should apply default settings)

2. **Set Root Directory Path**

 - Advanced: `/apps/web`

3. **Add Environment Variables**

 It is required to manually add environment variables to Cloudflare Pages. You can add them in the settings tab of your Cloudflare Pages application. Here are some of the required environment variables:

 ```plaintext
 NEXT_PUBLIC_PRODUCT_NAME = Project Name
 NEXT_PUBLIC_SITE_DESCRIPTION = "Your Site Description"
 NEXT_PUBLIC_SITE_TITLE = "Your site title"
 NEXT_PUBLIC_SITE_URL = https://project-name.pages.dev
 NEXT_PUBLIC_SUPABASE_URL = https://your-supabase-url.supabase.co
 NEXT_PUBLIC_SUPABASE_ANON_KEY = your-supabase-anon-key
 SUPABASE_DB_WEBHOOK_SECRET = your-supabase-webhook-secret (This is a secret key you generate)
 NEXT_PUBLIC_LOCALES_PATH = apps/web/public/locales
 NEXT_PUBLIC_AUTH_MAGIC_LINK = false
 NEXT_PUBLIC_AUTH_PASSWORD = true
 NEXT_PUBLIC_DEFAULT_THEME_MODE = light
 NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING = false
 NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION = true
 NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS = true
 NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING = true
 NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION = true
 NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION = true
 NEXT_PUBLIC_ENABLE_THEME_TOGGLE = true
 NEXT_PUBLIC_LANGUAGE_PRIORITY = application
 CMS_CLIENT = keystatic
 MAILER_PROVIDER = resend
 NEXT_PUBLIC_THEME_COLOR = "#ffffff"
 NEXT_PUBLIC_THEME_COLOR_DARK = "#0a0a0a"
 ```

4. **Save and Deploy on Cloudflare**

 - Click Save and Deploy.
 - Wait for the deployment to complete.
 - On completion your site will be live at `https://project-name.pages.dev/`
 - You will likely have an error on your first deploy and that is due to not setting the compatibility flags.

5. **Setting compatibility flags - Final Settings in Cloudflare**

 - Navigate to Project > Settings > Functions.
 - Add `nodejs_compat` to both production and preview compatibility flags.
 - Navigate to Workers & Pages > View Details > Manage Deployment > Retry Deployment.

## Final Steps on Supabase

6. **Setup Supabase Webhooks**

 - Navigate to Supabase > Database > Webhooks > Create Webhook
 - Add the following webhooks:

 - Name: `accounts_teardown` 
 Table: `public.accounts` 
 Event: `delete` 
 URL: `https://project-name.pages.dev/api/db/webhooks` 
 Timeout: `5000` 
 Add New Header: `X-Supabase-Event-Signature` `SUPABASE_DB_WEBHOOK_SECRET`

 - Name: `subscriptions_delete` 
 Table: `public.subscriptions` 
 Event: `delete` 
 URL: `https://project-name.pages.dev/api/db/webhooks` 
 Timeout: `5000` 
 Add New Header: `X-Supabase-Event-Signature` `SUPABASE_DB_WEBHOOK_SECRET`

 - Name: `invitations_insert` 
 Table: `public.invitations` 
 Event: `insert` 
 URL: `https://project-name.pages.dev/api/db/webhooks` 
 Timeout: `5000` 
 Add New Header: `X-Supabase-Event-Signature` `SUPABASE_DB_WEBHOOK_SECRET`

7. **Set Authentication URL**
 - Navigate to Supabase > Authentication > URL Configuration
 - Add the following URL: `https://project-name.pages.dev`
 - Add a redirect URL: `https://project-name.pages.dev/auth/callback`

## Testing and Final Configuration

1. **Test the Site**

 - Navigate to your Cloudflare Pages URL.
 - Sign up with a new account.
 - Verify that you can sign in and out.
 - Test the functionality of the site.

2. **Set Up Payment Processor**

 - Select either Stripe or Lemonsqueezy as your payment processor.
 - Add your payment processor to the `.env.local` file, test and add them to cloudflare environment variables.

3. **Set Up CMS**

 - By default Makerkit uses Keystatic as the CMS. If you wish to use keystatics this will require github mode. Please follow these [instructions](https://makerkit.dev/docs/next-supabase-turbo/cloudflare#8-workarounds) to monkey-patch the fetch function.
 - Alternatively, you can use the Wordpress CMS. Please follow these [instructions](https://makerkit.dev/docs/next-supabase-turbo/wordpress) to set up the Wordpress CMS.

4. **Set up Mail Provider**
 - Default is Supabase mail, which is rate-limited.
 - Use either Cloudflare or Resend as mail provider:
 ```plaintext
 MAILER_PROVIDER=resend
 ```
 ```plaintext
 MAILER_PROVIDER=cloudflare
 ```

By following these steps, you will have successfully set up and deployed your Makerkit SaaS boilerplate to production using Supabase and Cloudflare. If you need help or have any questions, please refer to the [official documentation](https://makerkit.dev/docs/next-supabase-turbo) or reach out to the Makerkit [discord](https://discord.com/invite/3hBn3nhbgD) community for support.

A complete guide on setting up and deploying Makerkit Next.js SaaS boilerplate from local development to production using Supabase and Cloudflare.

Showing posts from supabase tag

MakerKit review 2024: Nextjs App Template (Saas Starter Kit)

Supastarter Review 2024: Next.js and Nuxt SaaS Starter Kit

Deploying Makerkit SaaS Boilerplate with Supabase and Cloudflare