Using Airtable API with vanilla JavaScript on AWS S3 hosted webpage

Other Questions Airtable
1

I’ve got a webpage on AWS S3 and I’m trying to connect it to an Airtable base using their API. I’m new to JavaScript and don’t know Node.js. Is it possible to use the Airtable API without Node? If not, what should I do?

My HTML file (stored in S3) looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Data Display</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="data-container"></div>
    <script src="scripts/main.js"></script>
  </body>
</html>

I want to fetch data from Airtable and show it in the data-container div. What should I put in my main.js file? When I try var AirtableClient = require('airtable');, I get an error saying require isn’t defined. How can I make this work? Any help would be great!

2

I’ve tackled this exact problem before. You’re on the right track with using vanilla JavaScript, but there’s a catch with Airtable’s API and client-side code.

For security reasons, you shouldn’t expose your Airtable API key in client-side JavaScript. Instead, consider setting up a simple serverless function (like AWS Lambda) as a middleman. This function can securely hold your API key and make requests to Airtable.

In your main.js, you’d then use fetch to call your Lambda function:

fetch('https://your-api-gateway-url.com/your-lambda-function')
  .then(response => response.json())
  .then(data => {
    document.getElementById('data-container').innerHTML = JSON.stringify(data);
  })
  .catch(error => console.error('Error:', error));

This approach keeps your Airtable credentials secure while still allowing you to fetch and display data on your S3-hosted page. It’s a bit more setup, but it’s the right way to do it.

3

hey davidw, try using fetch in main.js to call airtable directly.

ex: fetch(‘https://api.airtable.com/v0/yourID/yourTABLE’, { headers: { ‘Authorization’: ‘Bearer yourKEY’ } }). then process data. hope it works, cheers!

4

While it’s possible to use the Airtable API without Node.js, you’ll need to approach it differently for a static S3-hosted webpage. Instead of ‘require’, you should use the Airtable.js library loaded via a script tag in your HTML. Add this before your main.js:

In your main.js, initialize Airtable like this:

var Airtable = require(‘airtable’);
var base = new Airtable({apiKey: ‘YOUR_API_KEY’}).base(‘YOUR_BASE_ID’);

Then use the Airtable object to fetch and display data. Remember to keep your API key secure, preferably using environment variables or a backend service. Also, be aware of CORS issues when making API requests from a browser.