Script tag quick start
Use Fauna’s JavaScript driver to query e-commerce demo data in client-side HTML.
-
Create a database with demo data
Log in to the Fauna Dashboard, and create a database with the following configuration:
-
Region group: Choose your preferred region group, which determines where your data resides.
-
Use demo data: Enabled.
-
Enable backups: Disabled.
Leave the other options as is.
-
-
Create an authentication secret
Fauna supports several types of authentication secrets. Create a key, which is a type of secret, with the built-in
server-readonly
role:-
In the Dashboard’s Explorer page, select your demo database.
-
In the database’s Keys tab, click Create Key.
-
Choose a Role of server (read-only).
-
Click Save.
-
Copy the Key Secret.
-
-
Create a webpage
Create an
index.html
file and add the following code. ReplaceKEY_SECRET
with your copied key secret.<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fauna Product List</title> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f4f4f4; } </style> </head> <body> <h1>Product List</h1> <table id="productTable"> <thead> <tr> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> <!-- Product rows will be added here --> </tbody> </table> <script type="module"> // Import the Fauna JavaScript driver using a CDN link. import { Client, fql, FaunaError } from "https://cdn.jsdelivr.net/npm/fauna@latest/dist/browser/index.js"; // Initialize the client to connect to Fauna // using the Fauna key's secret. const client = new Client({ // Replace `KEY_SECRET` with your copied key secret. // This key is exposed in the client. // In production, use a read-only key with limited privileges. secret: "KEY_SECRET", }); async function fetchProducts() { try { // Compose a query using an FQL template string. // The query calls the `Product` collection's // `sortedByPriceLowToHigh()` index. It projects the `name`, // `description`, and `price` fields covered by the index. const query = fql` Product.sortedByPriceLowToHigh() { name, description, price }`; // Run the query. const response = await client.query(query); // Populate the table. const tableBody = document.querySelector("#productTable tbody"); response.data.data.forEach(product => { const row = document.createElement("tr"); row.innerHTML = ` <td>${product.name}</td> <td>${product.description}</td> <td>${product.price}</td> `; tableBody.appendChild(row); }); } catch (error) { if (error instanceof FaunaError) { console.error("FaunaError:", error.message); } else { console.error("Error:", error); } } finally { client.close(); } } // Fetch and display products when the page loads. fetchProducts(); </script> </body> </html>
-
Open the webpage
Open the
index.html
file in a web browser. The page displays a table of e-commerce products from the demo data.