Supbase Products in a web page example

Enda Lee 2025

Quick Start

The web app needs to run in a web server as same origin policy prevents browsers from accessing network data in locally loaded pages.

This example uses Node.JS to host the site.

Start by opening the website folder in VS Code

The actual website is in the public folder.

To start the webserver and try out the site, open a new Terminal drom the menu in vs code:

1. npm install
2. npm run start

You should see the following:

Now open http://localhost:3000 in a web browserv to load the example site and display a list of products and categories from Supabase

Introduction

This tutorial will show how to display data, from your Supabase database, in a web page. You will use a combination of JavaScript, HTML, and CSS.

The Supabase API examples for accessing data can be found in the API section for JavaScript - these will be referenced later.

Pre-requisites

This tutorial continues from the previous ones, make sure that you:

1. Have setup a Supabase account and created the example database.
2. Have Node.js and VS Code installed on your PC.

Install Node.js

The client website needs to be hosted as web browsers enforce a same origin policy which can block access to data from external sources when a web page is not hosted opened directly.

Make sure that you have an up-to-date version of Node.js installed on your system. To check the current version (if installed), open a console/ terminal and then run node --version. You will see an error if Node.js is not currently installed.

To install or update Node.JS, download the current version from the nodejs.org website.

Install VS Code

You should also make sure the latest version of VS Code is installed before continuing this tutorial.

The start application

1. Download

To get started, download the code from this repository. It contains a website which is hosted by Node.js + Express.

After downloading, unzip the start application and *move it to somewhere easy to find, e.g., c:/webapps/y2-project/.

2. Open with VS Code

It is important to open the web app folder in VS Code and not individual files from a project. Folders can be opened from the VS Code file menu or by right-clicking the folder in windows explorer and choosing Open with VS Code).

The website can be found in the public folder, the contents of which will be hosted by the web server. You will find the home page for the site, index.html here.

Most of the files outside of the public folder are used by Node.js and Express to configure and start the HTTP server, server.js being the most important. You will not need to modify any of these files but it is important not to delete them!

This file is readme.md and the screenshots are stored in the media folder.

3. Start the the Node HTTP server

To start the webserver, first open a New Terminal from the Terminal menu in VS Code. Then use the Node Package Manager to install the required dependencies using the npm install command.

Finally, start the server using the npm run start command.

If everything worked, the message above will be returned in the terminal to indicate that the server is listening on http://localhost:3000.

4. Open the web app

Open http://localhost:3000 in a web browser. This should load the site home page index.html from the public folder in the application. That in turn will load the JavaScript and CSS required to display the page.

You should also open the browser console and check for any error messages or other information useful for diagnosing problems.

Supabase

The example uses data from www.supabase.com, stored in two tables, category and product. The tables look like this:

The table is populated with sample data, which is available in the db_setup folder in the project, along with SQL to create the tables.

Tables can also be added wia the supabase GUI:

Thexample is configured to work with my example. Open settings.json in the javascript folder to see the Supabase URL and API key. These can be replaced with your own values.

The API details can be found in settings for your database.

The next step is to connect to Supabase so that data can be retrieved via the API. The application has been partially configured but you will need to add some parameters and settings for your Supabase account.

The full Supabase reference guide for JavaScript is linked from the site, see https://supabase.com/docs/reference/javascript/supabase-client

1. Configure Supabase

Now to configure Supabase so that it can access your account and database. Open supbase.js which you can find the the public/javascript folder.

The rest of supbase.js contains functions to getAllProducts() , getAllCategories, and getProducuctsByCatId()Retrieve and Display Data

index.html

The events will be inserted in index.html as rows in the tbody element of the events table with id="productRows"

Near the end of index.html you will see that the script block responsible for retrieving and displaying data when the client app is loaded. This section describes the process in detail.

1. Import required functions from supabase.js. These are sued to connect to supabase to retrieve products and categories
2. Call getAllProducts() and store the result in products
3. Call displayProducts() which is defined later in this script block.
4. Get all categories
5. Call DisplayCategories() to add them to the page.

displayProducts(product_list)

This function is defined in the <scriptt> block at the bottom of index.html.

It parses the product_list array in the for loop (3), generating a table row for each product in the array. Each new row is added to the tableRows array(4). Once complete, the content of produectRows is added to the table (5).

displayCategories(category_list)

This function adds category items to the left side of the the page. It works much the same as displayProducts() but adds button links instead of table rows. Each button includes an onclick="filterByCat()" event handler. When clicked, the product list is updated to show only products from the chosen category.

1. Process the list of categories, generating a button link for each (pushed to the categoryItems array).
2. Add a button link for all products
3. Delete existing button links and replace with the new list.

Filter by selected category

The filterByCat(id) function gets product data for the matching category id by calling getProductsByCat(id) if id > 0. Otherwise it calls getAllProducts()

Test the Application

In a web browser, open http://localhost:3000. The page should load and display the data.

Check for details in the browser console where you will say the result of any logging, errors, etc.

Inspect the products table to see generated rows

---

Enda Lee 2025