Run an Existing Example

The Supabase team has provided us with a number of prebuilt examples show casing different features of Supabase. We will be using the Realtime Chat application with React to get Started.

Realtime Chat

1. Clone the repository

   git clone https://github.com/shwosner/realtime-chat-supabase-react.git

2. Open it in your favorite code editor. I am using VS Code.

   code realtime-chat-supabase-react

3. Make a copy of the .env.example file and rename it to .env.

4. Replace VITE_SUPABASE_KEY with anon key and VITE_SUPABASE_URL with API URL

5. Run npm install do download dependencies.

6. In the Supabase studio in your project go to the table editor and create a new table called messages with the following columns:

   Field	Type
   id	BIGINT
   username	VARCHAR
   text	TEXT
   country	VARCHAR
   is_authenticated	BOOLEAN
   timestamp	timestamp

Alternatively, you can use the sql editor to create the table with following schema:

CREATE TABLE messages (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  username VARCHAR NOT NULL,
  text TEXT NOT NULL,
  country VARCHAR,
  is_authenticated BOOLEAN DEFAULT FALSE,
  timestamp timestamp default now() NOT NULL
);

7. Run the project

   npm start

8. This will start the project at port 3000.

Making it realtime

1. Right now the application is working but it is not real time. You can only see the new message by refreshing the page. This is because by default realtime is disabled for better performance and security. To enable realtime
   1. Go to Database > Replication in the Supabase Studio.
   2. Click on Table under source at the right side of the screen.
   3. Toggle the table you want to enable realtime for. In this case we enable messages.
2. Now if we refresh the page and send a new message we should see them show up realtime.