Check out v4 of the Fauna CLI

v4 of the Fauna CLI is now in beta.

The new version introduces enhancements to the developer experience, including an improved authentication workflow. To get started, check out the CLI v4 quick start.

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. For this quick start, 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. 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.

Is this article helpful?

Tell Fauna how the article can be improved:
Visit Fauna's forums or email docs@fauna.com

Thank you for your feedback!