
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

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.

Deploying Makerkit SaaS Boilerplate with Supabase and Cloudflare

Let's face it, getting to the meat of application development is all we as developers and business owners really care about. We want to get to the fun part of building our applications and seeing our ideas come to life. Creating something that is feature-rich and provides a solution to a problem. Today, I want to introduce you to a tool that is revolutionizing the web development industry by simplifying the construction of customizable Next.js boilerplates while also incorporating MDX blogging, SEO optimization, one-click Vercel deployment and support for Netlify or Github Pages. This tool, built on the Next.js framework, is called Shipixen.

## What is Shipixen?

Shipixen is a tool that creates customisable Next.js boilerplates, Blogs, Waitlists, SaaS, Landing Pages and more. It can be used to build fullstack apps with ease. It enables users to easily generate and publish websites with built-in functionality from a selection of pre-built templates and components. Shipixen supports one-click deployment to Vercel and provides full ownership of the created code, making it perfect for developers who want to save time on configuration and design tasks.

## Features and Functionality

Shipixen provides a complete set of tools aimed at streamlining the web development process. Here are some of the key functionalities:

- **Customizable Boilerplates:** Generate tailored Next.js boilerplates for business websites, blogs, portfolios, and documentation.

- **App Router Support:** Support for the App Router in Next.js 14, including layouts, React Server Components, streaming, and new data fetching methods.

- **SEO Optimization:** Ensure your site is easily discoverable by search engines with built-in SEO best practices.

- **MDX Blogging:** Seamlessly integrate MDX for content creation, supporting tags, filters, authors, and pagination.

- **UI and Theming:** Utilize themed UI libraries with dark mode support, powered by TailwindCSS and Shadcn UI.

- **Deployment:** Simplify the process with one-click deployment to Vercel, providing full ownership of the source code in your chosen Git repository. Follow the simple steps in the documentation to deploy to Netlify or GitHub Pages, leveraging server-side rendering for enhanced performance and security.

- **Additional Features:** Include sitemap, RSS feed, privacy and terms pages, pricing page, and more.

- **React Server Components:** Integration of React Server Components for building highly dynamic, super fast, and SEO-ready React apps.

- **Server-side Rendering:** Support for server components to handle server-side rendering and pre-rendering.

Shipixen ensures a hassle-free setup, allowing developers to focus on building what matters most - the product.

<img className="w-full rounded-lg" alt="shipixen dashboard" src="https://res.cloudinary.com/dwumgnsux/image/upload/v1718601619/saasvial/acabutafvr5vfg9ophb4.jpg"/>

## Ease of Use and Setup

Once you have purchased a Shipixen license, you can start creating your custom Next.js boilerplate by selecting the desired template and components. The platform offers a user-friendly interface that guides you through the process, making it easy to customize your site with various options and settings.

1. **Sign Up:** Purchase either the 3 month or 1 year license to access Shipixen’s features and start building your site.
2. **Select Template:** Choose from more than 63+ themes and templates or create your own.
3. **Customize:** Personalize your selected template by adjusting the settings, adding content, and integrating features like MDX blogging and SEO optimization. Choose from over 103+ components.
4. **Deploy:** With just one click, deploy your fully customized site to Vercel, ensuring you have full ownership of your source code.

**Its as easy as that!**

## Performance and Scalability of Shipixen

Based on page speed insights and performance metrics, Shipixen ensures that the generated websites are optimized for speed and performance. The platform leverages Next.js to deliver fast-loading sites that provide a seamless user experience. Shipixen’s templates are designed to be scalable, allowing you to grow your site as needed without compromising performance.

<img className="w-full" alt="shipixen performance" src="https://res.cloudinary.com/dwumgnsux/image/upload/v1716880440/saasvial/yemlcjbuxx7uf0bfeyik.webp"/>
*Results generated based on template created with Shipixen.

## Pricing and Value for Money of Shipixen

Shipixen offers two pricing plans: a 3-month license and a 12-month license. The platform provides excellent value for money by simplifying the web development process and offering a range of features and templates that would otherwise take significant time and effort to create from scratch. Shipixen's pricing is competitive compared to the cost of hiring a developer or designer to build a custom site, making it an attractive option for businesses and developers looking to save time and resources.

<img className="w-full rounded-lg" alt="shipixen pricing" src="https://res.cloudinary.com/dwumgnsux/image/upload/v1718602347/saasvial/lp6vfcsmrgwc29fcxlta.png"/>

| Plan | Features | Price |
| ------------------- | ----------------------------------------------------------------------------------------------- | ----------- |
| **3-Month License** | Generate unlimited custom boilerplates for 3 months. All generated code is yours forever. | ~$100~ $87 |
| **1-Year License** | Generate unlimited custom boilerplates for an entire year. All generated code is yours forever. | ~$348~ $259 |

## Drawbacks of Shipixen for Users

While Shipixen offers a range of benefits for developers and businesses, there are some drawbacks to consider:

- **Requires some coding knowledge:** While Shipixen is designed to be user-friendly, some knowledge of nextjs is helpful to fully utilize its features and customize your site.
- **Strictly Nextjs:** Shipixen is built on Next.js, so users looking for solutions on other frameworks may need to look for other options.
- **Learning Curve:** Users unfamiliar with Next.js or web development may face a learning curve when using Shipixen.

## Conclusion

Our conclusion is that Shipixen can provide significant value to developers and businesses looking to streamline the development process. The platform’s customizable boilerplates, SEO optimization, and MDX blogging features make it an attractive option for those seeking to create fast, scalable websites with minimal effort. Shipixen’s one-click deployment to Vercel and support for Netlify or Github Pages further simplify the process, allowing users to focus on building their products rather than configuring their sites. With competitive pricing and a range of features, Shipixen is a valuable tool for developers looking to save time and resources on their projects.

Discover how Shipixen is revolutionizing the development process with a unique solution that simplifies the construction of customisable Next.js boilerplates while also incorporating MDX blogging, SEO optimization, and one-click Vercel deployment.

Shipixen - Easily generate unlimited Nextjs boilerplates



As certified web developer and business owner, I understand the critical role that software as a service (SaaS) applications play in modern business operations. While the right SaaS tools can significantly enhance productivity and efficiency, selecting the right product from the myriad of options available can be daunting.

In my review process, I prioritize transparency, thoroughness, and impartiality. My goal is to provide you with clear, comprehensive insights into each SaaS application, ensuring you can make informed decisions for your business needs.

Here, I will dive into how I approach my SaaS reviews and what I value (and don’t value) in these products.

| What I Do                                                   | What I Don’t Do                                               |
|--------------------------------------------------------------|----------------------------------------------------------------|
| **Independently research and test applications**             | **Accept compensation for biased reviews or placement**        |
| **Consult with industry experts, IT consultants, and real-world users** | **Recommend products that do not meet security or compliance standards** |
| **Honestly report findings**                                  | **Promote applications with poor performance or reliability**  |

## My Values

Integrity is one of my core values. It permeates everything I do, from evaluating SaaS applications to writing my reviews. I apply this value to my content in the following ways:

- I heavily rely on industry experts, IT consultants, and real-world users to assess functionality, usability, and security.
- I personally test almost every single application I review; if i wouldn’t use it in my own businesses, i wouldn’t recommend it for ymys.
- I do not recommend or promote products that do not meet security or compliance standards.
- I do not recommend products with known performance or reliability issues. Although I may cover such products, when I do, I lead with a detailed warning about their flaws or vulnerabilities.
- Lastly, though I may earn a commission on the products I recommend, I do not allow finances to affect how (or if) I evaluate a product.


## My Process

In order to fairly evaluate SaaS applications and create my best-in-class lists, I follow these steps:

- I compile a list of every product in a specific category, like project management tools or CRM software.
- I pare that list down by removing products that I know are low-quality or may have significant security vulnerabilities.
- I consult with industry experts, IT consultants, and real-world users to evaluate the product’s features, usability, and overall performance.
- I personally use the product as intended to assess factors like user experience, functionality, and reliability.
- Based on my testing and expert recommendations, I develop a best-in-class list of the top products in each category.


## Top Priorities for SaaS Application Reviews

There are a few key factors I look for in the products I recommend to my readers. Each of these appears in my multi-point testing methodologies for each SaaS category. I rate each point on my testing sheet on a scale of 1 to 5, finding an average rating for the product’s overall score.

My top priorities include:

- **Ease of Use and Setup**: I assess how intuitive and user-friendly the interface is, and how straightforward the setup process is for new users.
- **Features and Functionality**: I evaluate the core features offered by the application, as well as its customizability and integration capabilities with other tools.
- **Performance and Scalability**: I test the application's speed, responsiveness, and ability to scale effectively with growing user demand and data volume.
- **Security and Compliance**: I review the security measures in place to protect user data and ensure the product complies with relevant industry standards and regulations.
- **Pricing and Value for Money**: I analyze the pricing model and the overall value provided for the cost, considering the features, performance, and support offered.

By focusing on these priorities, I aim to provide comprehensive and reliable reviews that help my readers choose the best SaaS applications for their needs.



As a cerified web developer, i believe in testing and quality assurance. In this article, i will share with you the testing methodology i use to test my SaaS applications.

Showing posts from web-development tag

Deploying Makerkit SaaS Boilerplate with Supabase and Cloudflare

Shipixen - Easily generate unlimited Nextjs boilerplates

Saas Testing Methodology