Getting Started

Share
A long road stretches out into the distance before curving to the right, with trees on either side.
Photo by Matt Foxx / Unsplash

We have an app idea to get started with, a shared todo list for the household that Vic and I can use to keep track of tasks to be done around the house. Today, I'm starting on the boilerplate code to get this up and running using React Native with a Supabase backend.

I've done this boilerplate setup a few times before, for little app ideas I've experimented with as a hobbyist, but I haven't gotten the process down perfectly yet such that I can replicate it every single time. The biggest hurdle today is getting the Android emulator, or an app installed in developer mode on my phone, to communicate with my local Supabase backend.

This local Supabase backend is fairly easy to set up (when everything works as expected). There's a command line tool, the supabase CLI, to create Docker containers with the relevant tooling all set up and ready to go. You can even pull your database migrations from the production db and clone the schema locally, which is really nice if you're trying to test without hitting the production database. This is something that even Google's Firebase struggled with for ages -- they eventually came up with a decent "emulator"-based workflow that would let you run locally, but with Supabase it feels truly seamless and like it was made to do local development from day one.

Anyway, once I had my Supabase environment set up in Docker locally, I was able to generate an Expo-based React Native app using the create-expo-app tool. This got most of the boilerplate for running on Android out of the way quickly – since I already have Android Studio installed and my emulator up and running, it was easy to connect the emulator to this particular instance of Expo plus React Native to get the app prototype going.

The hardest part was the wiring between Supabase and the Expo app. Which, that isn't to say it was hard, just tricky if you don't know what you need to do. For example, most Supabase apps running locally connect to localhost directly, so your project url would be based on the loopback address, 127.0.0.1. However, since I'm running an Android emulator, I have to use my host address instead, in this case 192.168.1.76, that maps to the host system and not the emulated device's loopback. If I were running on my actual device, I'd have to make another change, to forward port 54321 for Supabase via adb (Android's debugger tool).

With the changes in the last paragraph, I got data to load! Next up tomorrow, I'll start working on inserting data into the database, and try to complete the circuit from database to app and back to database. Stay tuned!