Connecting to Airtable API using vanilla JavaScript in static S3 website

Other Questions Airtable
1

I’ve got a static website hosted on Amazon S3 and I’m trying to figure out how to pull data from Airtable using their API. Most tutorials I find talk about using Node.js but I’m working with plain HTML/JS files.

Here’s my basic HTML structure (dashboard.html):

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="main-wrapper">
        <div class="content-area">
            <div class="data-section">
                <div id="api-results" class="full-width">
                    <!-- API data will go here -->
                </div>
            </div>
        </div>
    </div>
    <script src="scripts/dashboard.js"></script>
</body>
</html>

When I try to use var Airtable = require('airtable'); in my JavaScript file (scripts/dashboard.js), I get an error saying require is not defined. Is there a way to connect to Airtable’s API using browser-based JavaScript without Node.js? What’s the proper approach for this setup?

2

require won’t work in browsers - that’s Node.js only. You need to use fetch API to hit Airtable’s REST endpoints directly. I encountered this issue while building a client dashboard last year. Structure it like fetch('https://api.airtable.com/v0/YOUR_BASE_ID/YOUR_TABLE_NAME', { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }). Handle the response with .then(response => response.json()) and catch errors. Remember that your API key will be visible in client-side code, so consider creating a read-only key with restricted permissions or using a serverless function as a proxy for sensitive data.

3

cors can be a pain. i used axios cdn for airtable too - super easy! just add <script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script> in your head and replace fetch with axios.get(). way simpler to manage!