In this tutorial, you’ll learn how to quickly enable a backend for your existing Rosebud web app or game. We’ll walk you through creating a Supabase project, configuring it via SQL, and finally connecting your app to Supabase — using Rosie to streamline the process.
Getting Started
If you want to build your next project with full backend support, remix this project and follow the interactive instructions.
Remix this project → Build Web App (Easy Backend)
Video Tutorial
Step 1: Create a New Supabase Project
Video 1: Watch how to create a new Supabase project
1. Prepare Your Project
- Before enabling the backend, ensure your frontend is ready (e.g., chat UI, login page, etc.).
- The backend setup comes after your core functionality is in place.
2. Click the “Enable Backend” Button
- In your Rosie-powered project, click the Enable Backend button to start the setup.
3. Copy the Supabase Project URL
- Click the Copy Supabase Project button.
- This copies a URL leading you to Supabase’s project creation page.
4. Create or Sign In to Supabase
- Open a new browser tab and paste the copied URL.
- If you have a Supabase account, you’ll land on the dashboard.
- If not, sign up for an account and log in.
5. Create a New Supabase Project
- On the top-left corner, click New Project.
- If prompted, create or select an organization. Organizations help manage multiple projects.
6. Configure Your Project
- Project Name: Enter a name or generate a random one.
- Database Password: Copy and save it securely—you’ll need this later.
- Region: Pick the region closest to you.
- Click Create.
7. Retrieve Your API Keys
- Once your project is created, you’ll receive:
- Secret API Key
- Anon API Key
- These will be needed to connect your project to Rosie.
8. Final Check
- Your Supabase project may take a moment to initialize.
- That’s it for Step 1—your backend foundation is ready!
Step 2: Configure Your Project via SQL
Video 2: Watch how to set up the backend with SQL
1. Navigate to “Step 2” in the Enable Backend Process
- Go back to Rosie’s interface and move on to Step 2.
- The new videos in this section will guide you (replacing any older ones).
2. Copy the SQL Code
- SQL is the language used to manage and manipulate databases.
- Locate the SQL script provided in Rosie’s instructions.
- Click Copy SQL to copy the entire code.
3. Open Supabase and Access the SQL Editor
- Switch to your Supabase project (from Step 1).
- Find and click on the SQL Editor tab in the Supabase dashboard.
4. Paste and Run the SQL Code
- In the SQL Editor, paste the copied script.
- Click Run to execute the query.
- Look for a Success message confirming the database update.
5. Verify the Database Update
- Go to the Database section in Supabase.
- You should see new tables or entries that were created by the script (e.g.,
users,posts,comments,files,generic_data).
6. Move to Step 3
- Return to your project in Rosie.
- Step 3 will have you connect your API key and project URL to Rosie for full integration.
SQL Script to Copy is Here.
Step 3: Connect Your App to the Supabase Backend
Video 3: Watch how to connect your app to Supabase
1. Retrieve Your Project URL and API Key
- Open your Supabase project from Step 2.
- Navigate to Project Settings in the left sidebar.
- In the General tab, scroll down to Data API.
- Copy your Project URL and Anon Public API Key.
- Do NOT copy the Secret API Key—only the Anon key is needed for client-side requests.
2. Check Your Frontend
- Ensure your frontend is functional (e.g., chat messages appear, login page works).
- Without a working frontend, you can’t properly test the backend.
3. Paste the API Key and URL into Rosie
- Return to Rosie in your project.
- Paste the Project URL and Anon API Key where requested.
- Rosie will use these details to finalize your backend setup.
4. Follow Rosie’s Backend Setup Prompts
- Rosie may provide additional SQL scripts or instructions.
- If so, open the Supabase SQL Editor again, paste any new code, and run it.
5. Test Your App
- Perform a few actions in your app (e.g., create a post, send a message) and refresh.
- If you need real-time updates, ask Rosie:
- “How do I make the messages update in real time?”
- Follow any additional steps Rosie provides.
6. Hide the “Enable Backend” Button
- Once your backend is fully operational, ask Rosie to “Hide the Enable Backend button.”
- This prevents users from seeing or messing with backend setup options.
Conclusion
Congratulations! Your app is now fully integrated with Supabase, providing a powerful backend for authentication, data storage, and more. Whether you’re building a chat app, an e-commerce platform, or something entirely different, you now have the tools to handle secure, scalable data operations.
If you ever run into any issues, Rosie is there to help debug and provide additional SQL commands.
Enjoy your new, backend-enabled app! 🚀