ViewModel state management with Flow in Jetpack Compose
Use MutableStateFlow for state and expose it as Flow for observation. Collect state in Compose using .collectAsState(initial = defaultValue).value. Use viewModelScope.launch to perform async operations like database queries. Examples: private val _productList = MutableStateFlow<List<Product>?>(listOf()); val productList: Flow<List<Product>?> = _productList. Then in UI: val productList = viewModel.productList.collectAsState(initial = listOf()).value.
Create Rails project with PostgreSQL
To create a new Rails project configured for PostgreSQL, run `rails new blog -d=postgresql` to scaffold a new project with the PostgreSQL flag. Then navigate into the project with `cd blog`.
Rails DATABASE_URL environment variable
Rails reads the DATABASE_URL environment variable from the environment and connects with it automatically, so you do not need to edit config/database.yml. Set it with `export DATABASE_URL=postgres://postgres.[PROJECT-REF]:[YO••••••D]@aws-[REGION].pooler.supabase.com:5432/postgres?sslmode=require`. The export applies to the current shell session only, so run it in the same shell as the Rails commands. The sslmode=require parameter stops the driver from falling back to sending data in plaintext.
Supabase Session Pooler connection string for Rails
To connect Rails to Supabase, navigate to the project dashboard and click Connect. Look for the Session Pooler connection string. Replace the Password placeholder with your saved database password and percent-encode any reserved characters it contains, such as &, #, ?, or a space. You can reset your database password in Database Settings if needed.
Rails direct connection string alternative
If you are in an IPv6 environment or have the IPv4 Add-On, you can use the direct connection string instead of Supavisor in Session mode.
Rails Active Record model creation and migration
Use `bin/rails generate model Article title:string body:text` to create an example model with fields, which generates the SQL migration files. Then run `bin/rails db:migrate` to execute the migration and create the table in the database.
Rails console for database interaction
Run `bin/rails console` to open the Rails console. You can then interact with the database by creating new entries with `article = Article.new(title: "Hello Rails", body: "I am on Rails!")`, saving them with `article.save`, and listing all entries with `Article.all`.
Rails development server startup
Run `bin/rails server` to start the development server. The application runs at http://127.0.0.1:3000 in a browser.
Install camera and PWA elements packages for Ionic
Install @ionic/pwa-elements and @capacitor/camera packages to enable interaction with the user's camera for photo uploads.
Install with: npm install @ionic/pwa-elements @capacitor/camera
These packages work with Ionic frameworks including Angular and Vue.
TanStack Start server client creation with cookie handling
The server client is created using createServerClient() from @supabase/ssr with VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY accessed through process.env. It requires a cookies configuration object with getAll() and setAll() methods. The getAll() method returns cookies using getCookies() from @tanstack/react-start/server as an array of {name, value} objects. The setAll(cookies, headers) method accepts cookies array and sets them with setCookie(), and sets response headers with setResponseHeader().
TanStack Start development server port
The TanStack Start development server runs on http://localhost:3000 by default. Start the development server with: npm run dev
TanStack Start browser client creation
The browser client is created using createBrowserClient() from @supabase/ssr with VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY accessed through import.meta.env.
TanStack Start CLI creation command
Create a TanStack Start app using the command: npx @tanstack/cli@latest create my-app
TanStack Start Supabase client libraries
Install supabase-js and @supabase/ssr using: npm install @supabase/supabase-js @supabase/ssr. The @supabase/ssr package is a helper that manages cookie-based sessions for server-side rendering in TanStack Start.
TanStack Start loader queries Supabase data server-side
In TanStack Start, use a loader to query Supabase data from the server. The loader runs on the server, so the queried data is included in the initial server-rendered response. The example shows querying the 'instruments' table using supabase.from('instruments').select() and returning the data to the component.
TanStack Start requires two Supabase clients
TanStack Start requires two separate Supabase clients: a browser client created with createBrowserClient() for components that run in the browser, and a server client created with createServerClient() for loaders and server functions. Both should be placed in src/lib/supabase folder.
Two types of Supabase clients in Next.js
Client Component client runs in the browser and accesses Supabase from Client Components. Server Component client runs only on the server and accesses Supabase from Server Components, Server Actions, and Route Handlers. Create separate utility files `lib/supabase/client.ts` and `lib/supabase/server.ts` for each type.
Next.js environment variables for Supabase client
Store Supabase API credentials in a `.env.local` file at the project root with two variables: NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY. These variables are exposed in the browser, which is safe because Supabase enables Row Level Security by default on all tables.
Install @supabase/supabase-js for Next.js
Run `npm install @supabase/supabase-js` to install the Supabase JavaScript client library for use in Next.js applications.
Opt out of Next.js data caching for authenticated requests
When using the `cookies` method in Next.js, it must be called before any Supabase calls to take fetch calls out of Next.js's caching. This is important for authenticated data fetches to ensure users only access their own data. Refer to Next.js documentation on opting out of data caching.
Run Next.js development server
Run `npm run dev` to start the Next.js development server, then access the application at localhost:3000/login.
Supabase environment variables setup
Configure environment variables for Supabase integration by creating a `.env`, `.env.local`, or equivalent configuration file in your project root.
Required environment variables:
- `VITE_SUPABASE_URL`: Set to your Supabase project URL
- `VITE_SUPABASE_PUBLISHABLE_KEY`: Set to your publishable API key
For Flask applications, use the variable names without the `VITE_` prefix:
- `SUPABASE_URL`
- `SUPABASE_PUBLISHABLE_KEY`
For Vue, TanStack Start, and other Vite-based frameworks, use the `VITE_` prefixed variable names.
Both values can be obtained from the project Connect panel in the Supabase dashboard.
File locations:
- Flask: `.env` in project root
- Vue: `.env.local` in project root
- TanStack Start: `.env.local` in project root
Create src/routes layout files for session and Supabase in SvelteKit
Create two layout files for SvelteKit to handle session and Supabase initialization:
1. `src/routes/+layout.ts` - Handles the session and the `supabase` object on the client-side.
2. `src/routes/+layout.server.ts` - Handles the session on the server-side.
These files work together to ensure the session is properly managed on both client and server sides, and the Supabase object is available for client-side operations.
Start Vue development server
To start the Vue development server, run `npm run dev` in your project directory. The app will be available at http://localhost:5173 in your browser.