Before building your web application, you should understand how WeWeb and Supabase can work together to streamline your development process.
WeWeb is a tool that helps you design the look and feel of your website without needing to write code.
Supabase handles the behind-the-scenes aspects, like storing data and managing user accounts.
When used together, they simplify the process of creating web applications.
What is WeWeb?
WeWeb is a tool that lets you build the frontend of your software. You can design how your software looks and works using a drag-and-drop interface.
WeWeb allows you to connect to various backends, including Supabase, and you can choose the one that suits your needs.
With WeWeb, you can create workflows to manage business logic, integrate APIs, use NPM packages, and add custom code.
What is Supabase?
Supabase is an open-source backend platform that helps manage your application's data and user accounts. Built on PostgreSQL, it offers a managed database, user authentication, real-time data syncing, auto-generated APIs, and serverless functions.
These features make Supabase a practical alternative to other backend options like Xano, Bubble, or building your backend from scratch.
Why Pair WeWeb with Supabase?
Pairing WeWeb and Supabase allows you to build efficiently. WeWeb handles the frontend UI, while Supabase manages the database, backend and user authentication. This separation makes development more organized and maintenance simpler.
Connecting Supabase and WeWeb
Assuming you have already defined the database schema in Supabase, it hardly takes 5 minutes to connect Supabase with WeWeb.
- Set Up a Supabase Account and Project.
- Configure Your Database and Authentication in Supabase.
- Generate API Keys in Supabase for Access:
- Navigate to the Settings > API section in your Supabase dashboard.
- Copy the Project URL and Public API Key; you'll need these to connect WeWeb to Supabase.
- Add Supabase as a Data Source in WeWeb:
- Log in to your WeWeb account.
- Go to the Plugins section and add the Supabase Data Source Plugin.
- Paste the Project URL and Public API Key you obtained from Supabase when prompted.
- Optionally, enable real-time tables if you want live data updates.
For a detailed walkthrough, have a look at this video.
Using Supabase data in WeWeb
Once you've connected Supabase with WeWeb, you can use the Supabase anywhere you want in your app.
- Create a Collection and select Supabase as the data source.
- Add a Data Grid or Container element to your WeWeb page.
- Bind the Collection to this element so it shows the data from Supabase.
- Customize the layout to fit your design needs.
To send data from WeWeb to Supabase and perform CRUD operations, you can create a workflow and send input values back to Supabase. You won't need to connect to the endpoint from scratch because WeWeb offers built-in actions for Insert, Select, Update, Delete, and Upsert.
Typically, you'd also create Postgres Functions and Edge Functions in Supabase for complex data manipulations. And you can trigger these right from WeWeb.
Using Supabase Authentication in WeWeb
Adding an authentication system is straightforward because WeWeb has integrated the Supabase SDK.
WeWeb offers authentication actions like Signup, Login, and Forgot Password, which flow out of the box. Even the UI is pre-built with the workflows.
- In WeWeb, navigate to Plugins > Authentication and add the Supabase Auth Plugin.
- Enter your Supabase Project URL, Public API Key, and Private API Key.
- Use WeWeb's pre-built UI elements for signup and login forms.
- Customize forms and set up workflows to handle user interactions as needed.
Implement Role-Based Access Control (RBAC)
- Create a roles table in Supabase to define user roles.
- Establish a join table, such as user_roles, to link users to roles.
- Configure WeWeb to recognize these roles and control access to different parts of your application.
Real-time data capability with Supabase and WeWeb
Supabase offers real-time data syncing, which allows your application data to be updated continuously without manual refreshes.
For example, in a live chat application, messages sent by one user appear instantly for others.
The syncing is done by WebSocket connections, ensuring low-latency communication.
Why We Recommend Supabase with WeWeb
There are many reasons which work in Supabase's favour compared to Xano.
Open-Source Transparency
Supabase's open-source nature provides transparency and flexibility, allowing customization to meet specific project requirements.
Custom code
While you can use Lambda functions in Xano to do operations not natively offered by them, Supabase is far more flexible regarding custom code operations.
Pricing
The pricing of Supabase is on the low end. Even the free plan of Supabase can work for some small apps where dedicated resources are not needed. If you need more resources, you can always upgrade to a higher plan, which are affordable. And if you want to take it a step ahead, you can even host it on your server.
In Xano on the other hand, the free plan is insufficient for most use cases. And you'd need to upgrade to the Scale plan if you have a production app with a reasonable number of users. However, the free plan of Supabase is sufficient for most users as long as the shared CPU is not of concern to you.
Vector embeddings
If you're looking to integrate AI to your application and want to leverage your app data for a better experience, you'd need to use Vector Embeddings. And Supabase allows you to use OpenAI and Hugging Face to store, index and search vector embeddings.
HIPAA and SOC2 compliance
Supabase is SOC2 compliant, so if your organisation's IT audit requires SOC2 compliance, only a few backend tools will make the cut.
One of our client manages sensitive medical records in the US, so we must ensure HIPAA compliance. Supabase offers an optional upgrade for this purpose.
Limitations of Supabase
While Supabase has many pros, it has certain limitations:
Resource Constraints
Supabase enforces limits on various resources. For example, the maximum memory allocation for Edge Functions is 256MB, and the maximum duration for these functions varies by plan—150 seconds for the Free plan and 400 seconds for Paid plans. Additionally, the maximum function size after bundling is 20MB.
File Upload Limits
Supabase imposes file size limits for storage uploads. On the Free plan, the file size cannot exceed 50MB. Paid plans allow higher limits, up to 50GB, with options for further increases upon request.
Database Size Restrictions
Projects on the Free plan have a CPU limit of 500MB. Hitting this limit forces the database to read-only until you reduce data or upgrade.
Custom Domain Support
Supabase does not natively support custom domains for its services. It means your project will be accessible via a Supabase subdomain, which may not align with branding requirements for some applications.
Costly optional upgrades
If, for some reason, the Supabase Pro plan is insufficient for your use case (example HIPAA, SLAs), the jump to the Team is dramatic—from $25/month to $500/month.
Self-hosting with Supabase
On the one hand, self-hosting gives you complete control over your backend, allowing you to meet any project requirements. Self-hosting helps when building applications that handle sensitive data. For large-scale applications, self-hosting can bring cost savings compared to managed services.
On the other hand, self-hosting requires a solid understanding of server management and database administration, as you'll be responsible for setting up and maintaining the infrastructure.
It means having server resources and planning for scalability, which needs careful and ongoing management. Moreover, regular updates, backups, and system monitoring are critical to maintaining stability and security, adding to the maintenance overhead.
Before deciding to self-host, evaluating your project's specific needs, your team's technical capabilities, and the resources available to manage and maintain the infrastructure effectively is crucial.
When to Consider Self-Hosting
- Customization Needs: If your project requires specific configurations or integrations not supported by managed services, self-hosting provides the flexibility to implement them.
- Data Privacy Concerns: Projects handling sensitive information may benefit from the enhanced security controls available through self-hosting.
- Predictable Workloads: Applications with steady, predictable traffic can leverage self-hosting to optimize costs effectively.
When Managed Services Might Be Preferable
- Rapid Deployment: Managed services facilitate quick setup, allowing you to focus on development without infrastructure concerns.
- Limited Technical Resources: Teams lacking in-house expertise for server management may find managed services more practical.
Final thoughts
The combination of Supabase and WeWeb is perfect for developers looking to explore low-code tools. They get all the flexibility of custom code and low-code platforms' speed and ease of use.
For teams without technical experience, particularly without backend experience, Xano is a better choice than Supabase.
.webp)
