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:
1. In the Dashboard’s Explorer page, select your demo database.
2. In the database’s Keys tab, click Create Key.
3. Choose a Role of server (read-only).
4. Click Save.
5. Copy the Key Secret.

Create a webpage

Create an index.html file and add the following code. Replace KEY_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.