portable-cto / airtable-proxy-worker Goto Github PK

View Code? Open in Web Editor NEW

133.0 8.0 16.0 490 KB

A Cloudflare Worker that allows you to make secure requests to the Airtable API from your frontend.

JavaScript 95.49% Shell 4.51%

cloudflare airtable cloudflare-worker proxy

airtable-proxy-worker's Introduction

Airtable Proxy Cloudflare Worker

A Cloudflare Worker that allows you to make secure requests to the Airtable API from your frontend.

Features

Keep your Airtable Base ID and API Key secret while still allowing frontend apps to access data from Airtable's API.
Limit requests to specific methods and tables. For example, using this library, you can make sure that public users can only make GET requests to your tables.
Automatically build and push updates to your Cloudflare Worker using Travis-CI.

Usage

Prerequisites

Cloudflare account with Workers enabled.
An Airtable Base ID and your Airtable API key.
Node and Node Package Manager (npm).
Familiarity with your computer's terminal/command line interface.

Building Locally

The easiest way to see this project in action is to build your Worker locally and copy/paste it into Cloudflare's UI:

Clone this repo: git clone https://github.com/portable-cto/airtable-proxy-worker.git
Install dependencies: npm install
Build the worker with your Airtable App/Base ID and API Key: AIRTABLE_API_BASE_ID=appXXXXXXXXX AIRTABLE_API_KEY=keyXXXXXXXXXX npm run build
Upload the built dist/worker.js file to cloudflareworkers.com to test your script.

Your Airtable's tables will be available via the table name. For example, if my Airtable base has a table name posts, it would be available at https://tutorial.cloudflareworkers.com/posts.

In order to deploy the worker to your own personal worker, upload it via the web UI and click "Deploy".

Routing

By default, the routes for each of your tables are available at YOUR_CLOUDFLARE_DOMAIN/RESOURCE_NAME. For example, if my custom domain is http://api.example.com and the table I want to access is called users, I would access the API at http://api.example.com/users.

You can change this routing using a PROXY_PREFIX as described in the Configuration section below.

Automated Deployment

You can also use Travis to automatically deploy updates to your Worker. Just add the following environment variables to your Travis settings:

CLOUDFLARE_EMAIL
CLOUDFLARE_AUTH_KEY
CLOUDFLARE_ZONE_ID
AIRTABLE_API_BASE_ID
AIRTABLE_API_KEY

The deploy block in the .travis.yml file will automatically update your worker in Cloudflare when the master branch is built using the script at scripts/deploy.

Configuration

In addition to the required AIRTABLE_API_KEY and AIRTABLE_API_BASE_ID variables, you can also set the following configuration options as ENV vars:

AIRTABLE_API_URL - Defaults to https://api.airtable.com.
AIRTABLE_API_VERSION - Defaults to v0.
PROXY_PREFIX - Use this if your Cloudflare worker's routes are prefixed by something before the Airtable resource name. For example, you may want to call mycustomdomain.com/api/posts instead of mycustomdomain.com/posts. In this example, you would add api as a prefix.
ALLOWED_TARGETS - Use this to lock down your Airtable API to specific resources and methods. For example, a stringified JSON object like this: '[{"resource":"posts","method":"GET,PUT"},{"resource":"comments","method":"*"}]' will allow GET and PUT requests on the posts resource and all request methods on the comments resource. Allows all methods for all resources by default.
PROXY_CACHE_TIME - Defaults to 0. The number of seconds set on the Cache-Control header to use Cloudflare's caching.

Contributing

Contributions are welcome and encouraged! When contributing to this repository, please first discuss the change you wish to make via the issues on Github.

Testing

Before you make a pull request, please add or update any relevant tests. You can run the test suite (uses Jest): npm run test:local

Also run Prettier to ensure that code styling is consistent: npm run prettier.

Pull Request Process

Make sure tests are running and linting passes before you submit a PR.
Update any relevant parts of the documentation in the readme.md file.
Update the changelog.md file with any new updates, breaking changes, or important notes.
Run the build process to make sure it passes too: npm run build.
Include a link to any relevant issues in the PR on Github. If there are problems with your PR, we will discuss them in Github before merging.

Releases

This library uses semantic versioning to inform users of breaking and non-breaking changes. When a new release is ready, the following steps will be taken:

Make sure tests still pass: npm test.
Run the release script: npm version <SEMANTIC_VERSION> && git push --tags with the release number you want to use.

This will create a new Tag in Github.

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

airtable-proxy-worker's People

Contributors

Stargazers

Watchers

Forkers

skeemer curtishall simonhearne fstfwd michaelcaterisano admariner cowboyhq trstnthms genblue icodein flatroy florisporro aladdin4u thedigitaloctopus midokhorshed ni5ni6

airtable-proxy-worker's Issues

Airtable View works in URL but not entirely in script

I deployed a Worker script to view my Airtable table called “main”.

My worker.js script is as follow in the specific section:

const config = { ...Object({"airtableApiUrl":"https://api.airtable.com","airtableBaseId":"appzXXXXXX”,”airtableApiVersion":"v0","airtableApiKey":"keyXXXXXX","cacheTime":0,"prefix":"","allowedTargets":"*"}) };
const parseJson = obj => {
  try {
    return JSON.parse(obj);
  } catch (e) {
    return obj;
  }
};

My Worker URL is working perfectly when I visit: https://myurl.workers.dev/main and I can see my whole table.

Now if I modify the airtableBaseId value to “appzXXXXXXX/main”

const config = { ...Object({"airtableApiUrl":"https://api.airtable.com","airtableBaseId":"appzXXXXXXX/main",”airtableApiVersion":"v0","airtableApiKey":"keyXXXXXX","cacheTime":0,"prefix":"","allowedTargets":"*"}) };
const parseJson = obj => {
  try {
    return JSON.parse(obj);
  } catch (e) {
    return obj;
  }
};

Then I can see my whole base directly from the root Worker URL https://myurl.workers.dev/

I would like to see another view from the same Airtable table called “myview”

If I type https://myurl.workers.dev/?view=myview then I can see the specific view in my browser directly.

But if I try to hard code the query string value to airtableBaseId like appzXXXXXXX/main/?view=myview then I get a 422 Unprocessable Entity with this response:

{"error":{"type":"VIEW_NAME_NOT_FOUND","message":"View myview/ not found"}}

Using the proxy with the Javascript API

HI,
Thank you so much for this script.
I was wondering, it is possible to use the proxy in the Airtable Javascript API?

[Question] Does Airtable Proxy cache by default?

I successfully deployed the worker to Cloudflare. Do I need to change anything in the worker script to enable caching? I noticed the cache time was set to 0, should I change that to something higher?

Great product btw, good work.

Thanks

Caching

Now supported in Cloudflare: https://developers.cloudflare.com/workers/reference/cache-api/

It would be great to give the option to cache GET requests.

Allowing get method but not list

First off, great package! Super happy I found this as it's exactly what I needed.

It would be great if there was a way to prohibit a list operation, but still allow get of individual resources.

GET request not listing in order

I currently have a cloudflare worker running and sucessfully making GET requests from the airtable api to a website I am developing for a client. However, for some reason no matter what I do I can't get the worker to list the data from airtable in order (as it is in the table).

Here is the config for the request:

access-control-allow-headers: authorization,content-length,content-type,user-agent,x-airtable-application-id,x-airtable-user-agent,x-api-version,x-requested-with access-control-allow-methods: DELETE,GET,OPTIONS,PATCH,POST,PUT access-control-allow-origin: * airtable-uncompressed-content-length: 4538 cache-control: max-age=0 content-length: 4538 content-type: application/json; charset=utf-8 date: Tue, 01 Feb 2022 22:06:57 GMT server: Tengine set-cookie: brw=brwJu77SKzdnETPFC; path=/; expires=Wed, 01 Feb 2023 22:06:57 GMT; domain=.airtable.com; samesite=none; secure strict-transport-security: max-age=31536000; includeSubDomains; preload vary: Accept-Encoding x-content-type-options: nosniff x-frame-options: DENY

Here is a segment of the response (two entries):

{"records":[{"id":"recXXXXXXXXXXXXX","fields":{"Title":"No. 2","Art":[{"id":"attXXXXXXXXXXXXXXX","width":1538,"height":1889,"url":"(linktoartwork)","filename":"2022-02-01 13.50.38.jpg","size":1013607,"type":"image/jpeg","thumbnails":{"small":{"url":"(linktoartwork)","width":29,"height":36},"large":{"url":"(linktoartwork)","width":512,"height":629},"full":{"url":"(linktoartwork)","width":3000,"height":3000}}}],"ArtLink":"(linktoartwork)","ID":"2","Descriptor":"‘Beautiful ridicule’"},"createdTime":"2021-11-01T19:43:47.000Z"},{"id":"recXXXXXXXXXXXXX","fields":{"Title":"No. 5","Art":[{"id":"attXXXXXXXXXXXXXXX","width":1424,"height":2000,"url":"(linktoartwork)","filename":"2022-02-01 13.51.30.jpg","size":879128,"type":"image/jpeg","thumbnails":{"small":{"url":"(linktoartwork)","width":26,"height":36},"large":{"url":"(linktoartwork)","width":512,"height":719},"full":{"url":"(linktoartwork)","width":3000,"height":3000}}}],"ArtLink":"(linktoartwork)","ID":"5","Descriptor":"‘Mark David’"},"createdTime":"2021-11-01T19:43:47.000Z"}

Here is an image preview of how the response is displayed on the site:

On the actual database it is in increasing order (No. 1, No.2, etc..) and that is how it should be listing. I was originally using nocodeapi which does just this, but it has a rate limit. This is much better suited for how much control Id like with my API, but I need it to list properly.

One last thing to mention is that I have tried rearranging the order in airtable and the output is the same. I'm thinking the issue has something to do with load time/cache.

Option to filter fields

It would be great if there was a way to filter which fields / columns are available through the API

Airtable API Key Deprecation

This project relies on Airtable API keys which have now been deprecated. Flagging this towards updating with Airtable's new api details,
https://support.airtable.com/docs/airtable-api-key-deprecation-notice