This article introduces how to systematically build up the core feature matrix of an SaaS independent site with the aid of Pages templates, including user management, subscription payment, podcast content, and more.
Overview
Building a feature-complete, secure, and reliable SaaS site with a good user experience is no easy task. Developers need to handle multiple complex aspects such as user authentication, data storage, and payment processing. Traditional development methods often require significant time and resource investment, involving multiple technology stacks and the integration of third-party services. This poses huge challenges for small teams and individual developers. Against this backdrop, our Pages SaaS Template provides an efficient and convenient solution for building SaaS sites. By combining Supabase and Stripe, developers can fully leverage the advantages of both to quickly build a powerful SaaS site without having to start from scratch to develop complex backends and payment systems. This allows them to focus more effort on optimizing core product features and user experience.
Template Features and Advantages:
Low development threshold: Deeply integrates Supabase (user authentication and data storage) and Stripe (subscription payment system).
Flexible scenario adaptation: Suitable for conventional SaaS sites such as tool class and content subscription class.
Cost and efficiency advantages: No need to build or maintain a complex technical architecture, reducing initial capital and labor costs.
Scenarios
Individual Developer
For individual developers, resources and time are limited, making it difficult to bear the cost of large-scale technical teams and complex development processes. Using our Pages template combined with Supabase and Stripe can significantly lower the development threshold, quickly realize the core features of a SaaS site, and help them launch products at relatively low cost and fast speed to verify business ideas.
AI Startups and Startup Teams
For AI startups and startup teams, they often face issues of limited funds and technical resources in the early stage. Using our SaaS template combined with AI large models can drastically reduce development costs and time, quickly bringing AI products to market. For example, a startup team focusing on natural language processing can leverage this combination to build a SaaS AI site offering intelligent copywriting generation services, verifying market demand at relatively low cost.
Preparations
Supabase
The order data and user management of this template use Supabase's API.
Preparing an API Key
Register and log in to Supabase, then create your own project.
Enter the Project's Project Settings - Data API, copy Project Url, Anon Public Key, Service_role Secret Key.
Initialize Database
After registering, create a new project in Supabase. Copy the content of the database initialization file to the SQL Editor in the Supabase console and run it to initialize the required database.
Disable User Email Verification
This template does not implement email verification. Need to turn off email verification In Project Settings - Authentication - Sign In / Up.
Contentful
Preparing an API Key
Register and log in to the Contentful CMS console, click Settings - API keys in the upper left corner, and click Add API Key to create a new API Key.
After creation, copy the Space ID, Content Delivery API - access token, and Content Preview API - access token.
Run command: contentful space import --content-file contentful-export.json --space-id your space id
You can also create it from the console:
After creating the data model, you can customize corresponding blog content.
Stripe
Preparing an API Key
First, give your application a name, for example: my-saas-site.
Register a Stripe account (the template Demo uses Stripe's test mode), then enter the console.
bottom-left corner Developers - API Keys, copy STRIPE_SECRET_KEY.
Create a WebHook
Re-enter Developers - WebHooks, click Add destination to create a WebHook.
In the WebHooks' events configuration, select the following events:
.
Fill in Endpoint URL with ${your application name}.edgeone.app/stripe/webhook. After the project is deployed successfully, products created on Stripe will trigger a function to update data to Supabase.
After creating the Webhook, copy the Signing secret for future use.
Create Application
Selecting a Template
Click to enter the Template Deployment Page, and fill in all the prepared environment variables.
.
Click to start deployment.
Create a Project and Wait for Deployment to Complete
After deployment, you can click the preview URL to view the effect.
Configure a Product on Stripe
Return to the Stripe console and add your subscription product.
.
Adding a product here will trigger your deployed edge function via the previously configured WebHooks, updating product data to the Supabase database for more customized order and product management.
Configure a WebHook in Contentful
The blog using the template adopts the SSG solution and generates static pages when compiling the project.
Configuring Webhooks provided by EdgeOne Pages in Contentful can automatically trigger redeployment when Contentful's content changes to update blog content.
Create a new WebHook on your project setting page.
Copy the address into Contentful's WebHooks.
Developing Locally
After pulling your project to your local system, install Edgeone Pages Cli locally.
Execute edgeone login to log in.
Then execute edgeone link ${your project name} to associate the online configuration locally, and the environment variables will be auto-written to the local .env.
Configure Development Environment Variables
Add the following variables in the .env file to facilitate SDK handling of frontend and backend cross-domain issues.
