Script tag quick start

Use Fauna’s JavaScript driver to query e-commerce demo data in client-side HTML.

 

  1. 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 demo database

  2. 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 key

  3. 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>
  4. 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.

    HTML page example

\