.png)
Overview
Using FlutterFlow with a local Supabase setup offers several benefits, especially for developers who want a no-code/low-code approach combined with a powerful backend solution.
%20(2).png)
Prerequisites
- Docker
- Supabase CLI
- FlutterFlow
Docker
Docker is a platform that allows you to develop, ship, and run applications inside lightweight, portable containers. Containers package applications with their dependencies, making them easy to run on different environments without compatibility issues.
1. Install Docker on Windows
Step 1: Download Docker Desktop
- Go to the official Docker website and download Docker Desktop for Windows.
- Ensure WSL 2 (Windows Subsystem for Linux) is enabled for better performance.
Step 2: Install Docker
- Run the installer and follow the setup instructions.
- Restart your computer if required.
Step 3: Verify Installation
- Open Command Prompt (CMD) or PowerShell and run:
docker --version- If Docker is installed correctly, it will show the installed version.
Supabase CLI
Supabase CLI (Command-Line Interface) is a tool that allows you to manage your Supabase projects, databases, authentication, and storage from the command line. It is useful for:
- Running Supabase locally
- Managing databases with migrations
- Deploying to the cloud
- Seeding test data
Install Supabase CLI on Windows
- Install Supabase CLI using Node.js. To download Node.js, go to the official website here.
npm install supabase --save-dev
- Verify installation:
supabase --version
- Inside the folder where you want to create your project, run:
supabase init
This will create a new supabase folder. It is safe to commit this folder to your version control system.
5.Now, to start the Supabase stack, run:
supabase start
If you encounter the error "Try rerunning the command with --debug to troubleshoot the error", try running:
npx supabase start --ignore-health-check
If the command runs successfully, you will see an output similar to this.
.png)
Using the Studio URL, you can open it in the browser to see the local Supabase and its functionalities. here you can also see API URL and anon key to connect your front end with local supabase.
Flutterflow
FlutterFlow is a low-code development platform built on top of Flutter, Google's open-source UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.
To set up your Flutterflow project, please follow the steps below:
1. Create a Flutterflow project
- Go to the Flutterflow console.
- Click on Create a project and follow the instructions to set up a new project.
.png)
2. Enable Supabase in Flutterflow
- Enable Supabase in flutterflow and fill API URL and Anon Key from local supabase.
%20(1).png)
To Link an Existing Supabase Project to the Local CLI
- Login to supabase
npx supabase login
After that, it will give you a link to log in to Supabase. Open that link in your browser, and it will provide a verification code like the one in the image below. Copy that code and paste it into PowerShell.
.png)
- Link the Supabase CLI to an existing Supabase project:
npx supabase link
%20(1).png)
After running this command, a list of your projects will be displayed. Select the project you want to use.
.png)
After selecting the project, enter your database password. Note that the password will not be visible while typing.
- Access the existing project tables and functionalities:
npx supabase db diff -f initial_structure --linked
- Access the existing project tables and stored data:
npx supabase db dump --data-only -f supabase/seed.sql --linked
%20(1).png)
- Reset and recreate the database in the local Supabase CLI:
npx supabase db reset
Conclusion
By following these steps, you can connect FlutterFlow with a local Supabase instance for testing and development. This setup allows you to work offline and develop apps efficiently before deploying to a production Supabase instance.
.png)
%20(1).png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Ready to develop your own product? Get in touch today!
Get in Touch
