Start Nuxt dev server
Start a Nuxt app in development mode by running `npm run dev`. The app will be accessible at http://localhost:3000.
framework-quickstarts
144 notes in this subject, read out of this brain and free to use. This is page 1 of 3.
Create Nuxt app command
Create a Nuxt app using the command `npx nuxi@latest init my-app`.
SvelteKit app creation command
Create a SvelteKit app using npx sv create my-app.
Initialize Supabase client in SvelteKit
Create a file at src/lib/supabaseClient.js (or .ts for TypeScript) with the following code: import { createClient } from '@supabase/supabase-js'; import { PUBLIC_SUPABASE_PUBLISHABLE_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'; export const supabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY). This initializes and exports the Supabase client.
Query data server-side in SvelteKit
In SvelteKit, create a +page.server.js file in the src/routes directory to fetch data server-side using the load function. Example: import { supabase } from '$lib/supabaseClient'; export async function load() { const { data } = await supabase.from('instruments').select(); return { instruments: data ?? [] } }. The TypeScript version includes type annotations and error handling.
Install supabase-js in SvelteKit
Navigate to the SvelteKit app directory and install the Supabase client library by running cd my-app && npm install @supabase/supabase-js. This library provides a convenient interface for working with Supabase from a SvelteKit app.
Display data in SvelteKit template
In the +page.svelte file, receive the data from the load function via $props() and iterate over it. Example: <script> let { data } = $props(); </script> <ul> {#each data.instruments as instrument} <li>{instrument.name}</li> {/each} </ul>.
Start SvelteKit development server
Run npm run dev to start the SvelteKit app. The app will be available at http://localhost:5173.
SolidJS app setup command
Create a SolidJS app using the degit command: npx degit solidjs/templates/js my-app
SolidJS query data example from Supabase
Example code for querying data in a SolidJS app: import { createClient } from '@supabase/supabase-js' import { createResource, For } from 'solid-js' const supabase = createClient( import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY ) async function getInstruments() { const { data } = await supabase.from('instruments').select() return data } function App() { const [instruments] = createResource(getInstruments) return ( <ul> <For each={instruments()}>{(instrument) => <li>{instrument.name}</li>}</For> </ul> ) } export default App This example creates a Supabase client using environment variables, defines a getInstruments function to fetch data from the instruments table, uses SolidJS createResource to handle the async data fetching, and renders the results using the For component.
Start SolidJS development server
Run npm run dev to start the development server. The app will be available at http://localhost:3000.
Create Spring Boot project with Spring Initializr
Use Spring Initializr to scaffold a new project. Run: `curl https://start.spring.io/starter.zip -d dependencies=web,data-jpa,postgresql -d type=maven-project -d language=java -d groupId=com.example -d artifactId=instruments -d name=instruments -o instruments.zip` then `unzip instruments.zip -d instruments && cd instruments`. This creates a Maven project with Web, Spring Data JPA, and Postgres Driver dependencies.
Spring Boot quickstart prerequisites
To use Supabase with Spring Boot, you need Java 17 or later (verify with `java -version`), and the tools `curl` and `unzip` to download and extract the generated project.
Spring Boot REST controller to query database
Create a `@RestController` with a method annotated with `@GetMapping("/instruments")` that receives an `InstrumentRepository` through the constructor. The method calls `instrumentRepository.findAll()` to fetch all rows and returns them as JSON.
Spring Boot app startup command
Start the Spring Boot application with `./mvnw spring-boot:run`. The app runs on http://localhost:8080 by default.
Create Vue app with npm init command
To create a new Vue app, run the command `npm init vue@latest my-app` in your terminal. This initializes a new Vue project with the name 'my-app'.
Create account component for profile management
Generate an AccountComponent with ng g c account command to allow users to edit their profile details and manage their accounts after signing in.
Angular Supabase initialization with supabase-js
Install the supabase-js package with: npm install @supabase/supabase-js. Create a src/environments/environment.ts file with your Supabase API URL and key. These credentials are safe to expose in the browser because Supabase has Row Level Security enabled by default on all tables.
Create auth component for login and signup
Generate an AuthComponent with ng g c auth command to manage logins and sign ups using Magic Links.
Angular CLI command to initialize Supabase Angular app
Use npx ng new supabase-angular --routing false --style css --standalone false --ssr false to create a new Angular application with appropriate defaults for a Supabase project.
Create SupabaseService in Angular app
Generate a SupabaseService using ng g s supabase command. This service initializes the Supabase client and implements functions to communicate with the Supabase API.
Run Angular app with npm run start
Start the Angular development server with npm run start command. The application will be accessible at localhost:4200.
Include ReactiveFormsModule in app.module.ts
When creating components that handle form submissions and file uploads, add ReactiveFormsModule from @angular/forms package to app.module.ts.
Install Supabase dependencies for React Native
For an Expo React Native app, install the required dependencies with: npx expo install @supabase/supabase-js @react-native-async-storage/async-storage. This provides the Supabase JavaScript client and async storage support for the React Native environment.
Run Expo development server
After setting up an Expo React Native app, run: npm start. Then press the appropriate key for the target environment (iOS, Android, or web) to test the application.
Prebuild Expo app for native platforms
To prepare an Expo app for iOS or Android deployment, run: npx expo prebuild. This command generates the native project files needed to build the application for the chosen platform.
Expo React Native app initialization with Supabase
To initialize an Expo React Native app called expo-user-management, use the command: npx create-expo-app -t expo-template-blank-typescript expo-user-management. Then navigate to the directory with cd expo-user-management.
Launch Ionic React dev server
Run `ionic serve` to start the development server, which by default opens the app at http://localhost:8100.
Capacitor camera package for Ionic React
Install `@capacitor/camera` to provide access to the device camera API for capturing photos in an Ionic React app.
Ionic PWA Elements package
Install `@ionic/pwa-elements` to polyfill browser APIs that lack user interfaces with custom Ionic UI components.
Magic Links authentication in Ionic React
Set up a login component using Magic Links to allow users to sign in with their email without passwords in an Ionic React app.
Environment variables for Ionic React Supabase
Store API credentials in a `.env` file with the variables `VITE_SUPABASE_URL` and `VITE_SUPABASE_KEY`, which are the API URL and publishable key copied from the Supabase project.
Install supabase-js in Ionic React project
Run `npm install @supabase/supabase-js` to add the Supabase JavaScript client library as a dependency in an Ionic React project.
Ionic React app initialization command
Use `ionic start supabase-ionic-react blank --type react` to initialize a new Ionic React app with the Ionic CLI.
Ionic Angular profile photos: bootstrap PWA Elements in main.ts
Update main.ts to include an additional bootstrapping call for Ionic PWA Elements to enable camera functionality.
Ionic Angular profile photos: create AvatarComponent
Create an AvatarComponent with the command: ionic g component avatar --module=/src/app/account/account.module.ts --create-module. This component handles user profile photo uploads.
Ionic Angular profile photos: Capacitor runtime
Capacitor is a cross-platform native runtime from Ionic that enables web apps to be deployed through the app store and provides access to native device APIs.
Ionic Angular quickstart: run development server
Run the development server with: ionic serve. The browser automatically opens to display the app.
Ionic Angular quickstart: create account management page
Create an AccountComponent to allow signed-in users to edit their profile details and manage their account. Use the command: ionic g page account.
Ionic Angular quickstart: implement magic link authentication
Set up a login route using Magic Links so users can sign in with their email without using passwords. Create a LoginPage with the command: ionic g page login.
Ionic Angular quickstart: create SupabaseService
Create a SupabaseService with the command: ionic g s supabase. This service initializes the Supabase client and implements functions to communicate with the Supabase API.
Ionic Angular quickstart: environment variables storage
Save API URL and anon key in the src/environments/environment.ts file. These variables will be exposed in the browser, which is acceptable because Row Level Security is enabled on the Database.
Ionic Angular quickstart: install supabase-js dependency
Install supabase-js with: npm install @supabase/supabase-js
Ionic Angular quickstart: initialize app with Ionic CLI
To create a new Ionic Angular app called supabase-ionic-angular, run: npm install -g @ionic/cli, then ionic start supabase-ionic-angular blank --type angular, then cd supabase-ionic-angular.
Flutter Supabase snackbar extension
Create a BuildContext extension with a showSnackBar method to display snackbar messages: `extension ContextExtension on BuildContext { void showSnackBar(String message, {bool isError = false}) { ... } }`. This method displays different colors for error vs success messages based on the isError parameter.
Flutter app launch commands
Run a Flutter app on Android or iOS with `flutter run`. Run on web with `flutter run -d web-server --web-hostname localhost --web-port 3000` to launch on localhost:3000.
Flutter Supabase project initialization
To initialize a Supabase Flutter app, use `flutter create supabase_quickstart` to create a new Flutter project, then add the `supabase_flutter` package version ^2.0.0 to pubspec.yaml and run `flutter pub get`.
Account management component in Ionic Vue
After sign-in, create an Account component that allows users to edit their profile details and manage their account settings.
Environment variables for Ionic Vue Supabase setup
Store Supabase credentials in a .env file with the following variables: VUE_APP_SUPABASE_URL and VUE_APP_SUPABASE_KEY. These are set to the API URL and key from your Supabase project.
Capacitor runtime for Ionic Vue
Capacitor is a cross-platform native runtime from Ionic that enables deploying web apps to app stores and provides access to native device APIs.
Router configuration for Ionic Vue app
Configure the router in src/router/index.ts to manage navigation between login and account pages in the Ionic Vue application.
Main App component for Ionic Vue
Update the App.vue component to render the router and display either the login page or account page based on the user's authentication state.
Ionic PWA Elements polyfill
Ionic PWA Elements is a companion package that polyfills certain browser APIs that provide no user interface with custom Ionic UI components.
Bootstrap Ionic PWA Elements in main.ts
Update main.ts to include an additional bootstrapping call for the Ionic PWA Elements to enable their functionality in the application.
Ionic Vue app initialization command
Use the Ionic CLI to initialize an Ionic Vue app with the command: npm install -g @ionic/cli, then ionic start supabase-ionic-vue blank --type vue, then cd supabase-ionic-vue.
supabase-js installation for Ionic Vue
Install the supabase-js dependency using: npm install @supabase/supabase-js
Run Ionic Vue development server
Start the development server using the command: ionic serve. This will run the app on localhost:8100 by default.
Create Supabase client helper in Ionic Vue
Create a helper file (typically src/supabase.ts) to initialize the Supabase client using the credentials from environment variables.
React app setup with Vite and supabase-js
Initialize a React app using Vite by running `npm create vite@latest supabase-react -- --template react`. Navigate to the directory with `cd supabase-react`. Install the Supabase JavaScript client with `npm install @supabase/supabase-js`.
Environment variables for Supabase React setup
Store the Project URL and API key in a `.env.local` file. These credentials are safe to expose in the browser because Supabase enforces Row Level Security by default on all tables.