Build iOS, Android and Vision Pro apps with Supabase and NativeScript

ns-supabase-demo.mp4

iOS, Android and Vision Pro apps flavored with Angular, Solid and Vue all running Supabase for realtime data.

• Setup
  • Add your Supabase URL and Key
  • Configure your Supabase for items access
• Choose your preference
• What is This?
  • Notes

Setup

Prerequisites:

• NativeScript Environment Setup
• node >=20

npm run setup

Add your Supabase URL and Key

You will need to configure your own Supabase account to try against the samples.

Create environment files for the following:

• apps/nativescript-angular/.env
• apps/nativescript-solid/.env
• apps/nativescript-vue/.env

With the following:

SUPABASE_URL=https://your-account.supabase.co
SUPABASE_ANON_KEY=your-key

Configure your Supabase for items access

1. Create a table named items, matching this schema:

2. Make adjustments to the demo account here to use an email/password for a user in your Authenticated > Users section of Supabase.

3. Adjust RLS security rules allow create/update/delete on the items table

The Todo apps will now come to life.

Choose your preference

npx nx debug nativescript-angular android
npx nx debug nativescript-angular ios
npx nx debug nativescript-angular visionos

npx nx debug nativescript-solid android
npx nx debug nativescript-solid ios
npx nx debug nativescript-solid visionos

npx nx debug nativescript-vue android
npx nx debug nativescript-vue ios
npx nx debug nativescript-vue visionos

What is This?

An Nx workspace with Angular, Solid and Vue (iOS, Android and Vision Pro) apps all powered by Supabase.

Notes

• packages/nativescript-data/src/services/supabase.ts isolates the data handling, which is shared among all the apps.
• App_Resources are shared between all apps via their nativescript.config > appResourcesPath setting.

All practices shared are for demonstration purposes only.