Connecting to the API from Codepen

[Greyson]

I’m trying to connect to the API with a private code playground such as Codepen for quick experimentation.

I’ve added the retrieve script to the JS editor:

var Airtable = require("airtable");
var base = new Airtable({ apiKey: "key123" }).base(
  "app123"
);

base("Base").find("rece123", function (err, record) {
  if (err) {
    console.error(err);
    return;
  }
  console.log("Retrieved", record.id);
});

But I get this error:

Uncaught ReferenceError: Airtable is not defined

I’ve tried linking to the Airtable CDN but that hasn’t worked. What else am I missing to get this to work? Is there a simple way to get Airtable running in a JS editor in the browser? It’s private so the API key is protected.

Here is a sample pen (not private with dummy key)
https://codepen.io/meowpower/pen/eYJNoXK?editors=0011

Thanks in advance

[Matthew_Thomas · Accepted solution]

The ReferenceError you’re receiving is because the Airtable package is not installed in the Codepen you are running. Trying to link to the Airtable CDN is towards the right track, but I might not work in this situation. I haven’t found a go-to place to link to the Airtable library like you might find with jQuery or Bootstrap, and since the Airtable library includes several build files, I’m not sure how helpful that would end up being.

For Codepen in particular, it looks like you might need a Pro account so you can upload Assets (at the bottom of the UI). If you upload the Airtable.js package as located on npm, you should be able to import this as you already do with

var Airtable = require("airtable");

Other browser-based JS editors might allow you to upload files without a Pro account. The main idea is the ReferenceError is occurring because the Airtable.js package needs to be available to require().

---

If this answers your question, please consider marking it as “solution”. If not, I’m happy to work with you further. Thanks!

[Greyson]

@Matthew_Thomas thanks for the quick reply, you’ve solved my question!

Here’s exactly what I did:

1. Using a private pen with a pro codepen account, I added my retrieve code:

   var Airtable = require(“airtable”);
   var base = new Airtable({ apiKey: “key123” }).base(
   “app123”
   );

   base(“Base”).find(“rece123”, function (err, record) {
   if (err) {
   console.error(err);
   return;
   }
   console.log(“Retrieved”, record.id);
   });

2. I visited https://github.com/airtable/airtable.js/, downloaded the repo, found airtable.browser.js and uploaded it to Codepen as an asset

3. I then added this script tag to the in settings with the URL to the asset

<script src="https://assets.codepen.io/1234567/airtable.browser.js"></script>

4. I ran the code and then opened console log to confirm