Skip to content

Latest commit

 

History

History
194 lines (122 loc) · 6.83 KB

README.md

File metadata and controls

194 lines (122 loc) · 6.83 KB
Raw
ElectricSQL logo

Checkout ElectricSQL + Supabase Example

This is an example web application using ElectricSQL in the browser with wa-sqlite, using Supabase with it's auth and edge functions, and the Ionic Framework for the UI.

The app is deployed here for you to try out: http://checkout-demo.electric-sql.com/

Supabase Auth is used to register and sign in a user, the Supabase JWT is then used to establish a connection with Electric.

A Supabase Edge Function is used to process the card payment on submission of the checkout. The card details would be converted to a token by a payment provider and attached to the order record, there is then a trigger on the order table. When a new order is inserted it calls a edge function to process the order updating it's status in real time and syncing that with the visitors local checkout.

Included in the repo is a docker compose setup than enables you to run Supabase locally with Electric - the instructions below start this for development.

Instructions

Clone the electric-sql/electric mono-repo and change directory into this example folder:

git clone https://github.com/electric-sql/electric
cd electric/examples/supabase-basic

Pre-reqs

You need NodeJS >= 16.11 and Docker Compose v2.

Install

Install the dependencies:

npm install

Running the app

There are two methods described below to run the app:

  1. Run locally using a local Supabase stack
  2. Run against hosted Supabase, with a local Electric sync service

Run locally using a local Supabase stack

Start local Supabase and Electric using Docker (see running the examples for more options):

npm run backend:up
# Or `npm run backend:start` to foreground

If you need to change the configuration of ports for the local Supabase docker containers, that can be done in ./backend/.env

Setup your database schema:

npm run db:migrate

Generate your type-safe client:

npm run client:generate
# or `npm run client:watch`` to re-generate whenever the DB schema changes

Load the stores catalog into the database:

npm run db:load-data

Start your app:

npm run dev

Open localhost:3001 in your web browser.

Run against hosted Supabase

If you don't yet have a Supabase account visit supabase.com and create one.

1. Setting up a Supabase Postgres

Log in to your Supabase dashboard and click "New Project". In the form enter a name for the database, and a password that will be used to connect to it. Make a note of this password and save it somewhere secure.

2. Enable the pg_net extension

Go to the "Database" section of the project, and select "Extensions". Search for "pg_net" and enable it for the "extension" schema.

3. Retrieving the Project reference id

Go to "Project Settings" (look for the gear icon at the bottom of the icon menu on the left hand side of the page) and open the "General" section. In the top section copy the "Project reference id". This is used for deploying the edge function.

4. Retrieving the connection details

Now open the "Database" section. Under the heading "Connection string" select the URI tab. Copy the connection string shown and save it somewhere.

You will use this as the value for the DATABASE_URL in your Electric sync service configuration.

5. Retrieving the Project URL and JWT and API authentication keys

Now open the "API" section of the project settings. Copy the "Project URL", this is the value you will use for the ELECTRIC_SUPABASE_URL setting below.

Copy the anon/public and service_roll API keys. These are used for the ELECTRIC_SUPABASE_ANON_KEY and trigger "Bearer Token" respectively.

Scroll down to the "JWT settings". Reveal and copy the "JWT Secret" value. You will use this as the value for AUTH_JWT_KEY in your Electric sync service configuration.

6. Configuring Electric and the app to connect to Supabase

Edit the ./electric/docker-compose.yml file, setting the DATABASE_URL and AUTH_JWT_KEY to the values retrieved above.

Edit the ./.env file and set ELECTRIC_SUPABASE_URL, ELECTRIC_SUPABASE_ANON_KEY and DATABASE_URL to the values retrieved above.

7. Modify the AFTER INSERT trigger

Edit the ./db/migrations/02-create_process_item_trigger.sql file so that the "Authorization":"Bearer xxxx" "Bearer Token" value is that of the service_roll API key you retrieved above.

Also, edit the URL of the edge function so that the hostname is the "Project URL" you retrieved above. Leave the /v1/process after the hostname in place. The resulting URL should looks like:

'https://qwertyuiopasdfghjklz.supabase.co/functions/v1/process'

8. Deploy the Edge Function

To deploy the "process" edge function from ./supabase/function/process run this command with the "Project reference id" you retrieved above.

npx supabase functions deploy process --project-ref xxxxxxxxxxxxx

9. Start a local Electric sync service

To run the local electric sync service run:

cd ./electric
docker compose up

9. Migrate the database, load the store catalog and generate the client

To apply the migrations to the database, run:

node ./db/migrate.js

Load the stores catalog into the database:

npm run db:load-data

Generate your type-safe client:

npm run client:generate
# or `npm run client:watch`` to re-generate whenever the DB schema changes

10. Run the App

To start the app run:

npm run dev

Develop

For more information see the:

If you need help let us know on Discord.