DEV Community 👩‍💻👨‍💻

Cover image for How to use Supabase in Replit with node.js
awalias for Supabase

Posted on • Updated on • Originally published at supabase.com

How to use Supabase in Replit with node.js

Replit.com is an awesome new browser based IDE where you can code alone or collaboratively with friends using their cool multiplayer features! It's particularly useful for education, and sharing code examples with others.

They support a ton of different languages and execution environments and even recently introduced a simple key value store you can use to persist data.

As a Replit user, if you want to access larger amounts of data direct from your repl, or if you fancy accessing some super-powerful query tools, at some point you may want to start interacting with a relational database. Supabase is a good fit here; just like Replit, you don't need to worry about servers, and hosting, you can just click a few buttons and get a fully featured relational database which you can start communicating with directly from javacript, using supabase-js.

Screenshot 2021-03-11 at 5.18.05 PM

Here's how to start a Supabase + Node.js repl:

Sign up for replit.com and hit new repl in the top left

Untitled-2

Select node.js, give it a name, and click Create repl

Untitled-1

Import supabase's createClient method and hit run to install the required libs:

const { createClient } = require('@supabase/supabase-js')
Enter fullscreen mode Exit fullscreen mode

Setup a new Supabase project and grab the URL and anon key from Settings > API. Create the client in javascript using:

const supabase = createClient(
  'https://ajsstlnzcmdmzbtcgbbd.supabase.co',
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
)
Enter fullscreen mode Exit fullscreen mode

Untitled-3

Now that supabase is connected you'll want to add some data to your db, you can grab any SQL dataset on the web, or make your own, but the fasted way to test is to open the SQL tab in the Supabase dashboard and click the Countries sample database and click Run.

Untitled-4

From within your repl you can now query your countries table like:

// .then() syntax
supabase.
  .from('countries')
  .select('*')
  .limit(5)
  .then(console.log)
  .catch(console.error)

// or...
// async/await syntax
const main = async() => {
  let { data, error } = supabase
    .from('countries')
    .select('*')
    .limit(5)

  if (error) {
    console.log(error)
    return
  }

  console.log(data)
}
main()
Enter fullscreen mode Exit fullscreen mode

Once this is working, if you want to learn more about the query interface you might want to try some of these challenges:

// 1. List all the countries in Antarctica
// 2. Fetch the iso3 code of the country with ID 3
// 3. List the countries with 'Island' in the name
// 4. Count the number of countries that start with 'Z' or 'Q'
// 5. Fetch all the Countries where continents is null
Enter fullscreen mode Exit fullscreen mode

There are full solutions provided in the video version of this blog, but some examples you may find useful are:

// or
const { data, error } = await supabase
  .from('cities')
  .select('name, country_id')
  .or('id.eq.20,id.eq.30')

// is
const { data, error } = await supabase
  .from('cities')
  .select('name, country_id')
  .is('name', null)

// in
const { data, error } = await supabase
  .from('cities')
  .select('name, country_id')
  .in('name', ['Rio de Janeiro', 'San Francisco'])

// neq (not equal to)
const { data, error } = await supabase
  .from('cities')
  .select('name, country_id')
  .neq('name', 'The shire')

// full docs here: https://supabase.io/docs/client/filter
Enter fullscreen mode Exit fullscreen mode

We look forward to showing off some more Supabase + Replit examples.

You can find my example repl here: https://repl.it/@awalias/supabase-test#index.js

Supabase has a free tier, head over to https://app.supabase.io to get started.

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.