➡️ Get Instant updates for your App with Capgo 🚀

Fix your annoying bug now, Hire a Capacitor expert 💪

Features

• ⚡️ Test webapp directly in your phone with native API

• 😃 Share your dev with your teamate

• ↕️ Manage your channels for auto update system.

Documentation

https://github.com/Cap-go/capacitor-updater/wiki/Capgo-Sandbox-App

• Changing supabase

Plugins

All official plugin are install and preconfigured

• Action Sheet - Provides access to native Action Sheets.
• App - Handles high level App state and events.
• App Launcher - Allows to check if an app can be opened and open it.
• Browser - Provides the ability to open an in-app browser and subscribe to browser events.
• Camera - Provides the ability to take a photo with the camera or choose an existing one from the photo album.
• Clipboard - Enables copy and pasting to/from the system clipboard.
• Device - Exposes internal information about the device, such as the model and operating system version, along with user information such as unique ids.
• Dialog - Provides methods for triggering native dialog windows for alerts, confirmations, and input prompts.
• Filesystem - Provides a NodeJS-like API for working with files on the device.
• Geolocation - Provides simple methods for getting and tracking the current position of the device using GPS, along with altitude, heading, and speed information if available.
• Haptics - Provides physical feedback to the user through touch or vibration.
• Keyboard - Provides keyboard display and visibility control, along with event tracking when the keyboard shows and hides.
• Local Notifications - Provides a way to schedule device notifications locally (i.e. without a server sending push notifications).
• Motion - Tracks accelerometer and device orientation (compass heading, etc.).
• Network - Provides network and connectivity information.
• Push Notifications - Provides access to native push notifications.
• Screen Reader - Provides access to TalkBack/VoiceOver/etc. and Provides simple text-to-speech capabilities for visual accessibility.
• Share - Provides methods for sharing content in any sharing-enabled apps the user may have installed.
• Splash Screen - Provides methods for showing or hiding a Splash image.
• Status Bar - Provides methods for configuring the style of the Status Bar, along with showing or hiding it.
• Storage - Provides a simple key/value persistent store for lightweight data.
• Text Zoom - Provides the ability to change Web View text size for visual accessibility.
• Toast - Provides a notification pop up for displaying important information to a user. Just like real toast!

Dev contribution

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi.

Dev tools

• TypeScript
• bun - fast javascipt runtime, package manager, bundler, test runner an all-in-one toolkit
• critters - Critical CSS
• Cloudflare - zero-config deployment
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support
  • Windi CSS Intellisense - IDE support for Windi CSS
  • ESLint

Usage

Deploy on Cloudflare Pages

use the CLI to deploy preprod

bun run dev-build
# then deploy
bun run deploy:cloudflare_frontend:preprod

or Prod

bun run build
# then deploy
bun run deploy:cloudflare_frontend:prod

Development

You will need to start each local server in separate terminals.

Before you continue, you need to have these installed:

• Docker
• bun
• Supabase CLI

You can install the supabase CLI globally with bun install supabase -g and you can invoke supabase from anywhere.

Alternatively, you can install the CLI inside this repo with bun install supabase --save-dev but to invoke it use: ./node_modules/supabase/bin/supabase.

The rest of this guide assumes that you installed the supabase CLI globally.

Start Supabase DB Locally

Start the Supabase DB:

supabase start

If the command completed successfully, your console output should be similar to the output below:

Started supabase local development setup.

         API URL: http://localhost:54321
     GraphQL URL: http://localhost:54321/graphql/v1
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: xxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXx.xxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXx
service_role key: xxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXx.xxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxxXxxxxxX

Start Supabase DB and Functions Locally

You need make sure Docker is running.

bun install
bun backend

Start Frontend Locally

Before starting the frontend, make sure you replace the value of supa_anon.local inside the file configs.json with the value of anon key. If supabase is already running, you can also obtain anon key from the output of supabase status.

In another terminal, run the server with the necessary Netlify functions:

bun serve

Login

Visit http://localhost:5173

There are two login credentials you can use:

Account	Username	Password
Demo User	[email protected]	testtest
Admin User	[email protected]	adminadmin

The demo user account has some demo data in it. If the data is not fresh just reset the db with supabase db reset. The seed has been made in the way the data is always fresh.

The admin user has admininstrative rights so he can impersonate other users. You can find the menu for that in the account section.

Supabase DB Reset

Make sure you have Docker running.

This will seed the DB with demo data again.

supabase db reset

Deploy Supabase self hosted

To deploy the supabase instance self hosted, use the Supabase offical guide.

Deploy Supabase cloud

To deploy the supabase instance on cloud, you need a paid account at $25/month.

Link the project to the cloud with the following command:

supabase link

https://supabase.com/docs/reference/cli/supabase-link

Then you need to push the migrations to the cloud with the following command:

supabase db push --linked

https://supabase.com/docs/reference/cli/supabase-migration-up

And seed the DB with demo data:

supabase seed buckets

https://supabase.com/docs/reference/cli/supabase-seed-buckets

Seed the secret for functions:

supabase secrets set --env-file supabase/functions/.env

Push the functions to the cloud:

supabase functions deploy

Build

To build the webApp in mobile, to push to store, run

bun install
bun mobile

And you will see the generated file in dist that ready to be served.