Giter VIP home page Giter VIP logo

airtable-netlify-short-urls's Introduction

airtable-netlify-short-urls

โš ๏ธ There's a simpler version using Netlify redirects instead of Airtable here

This is a simple short-url service that works with netlify functions and uses airtable.

It's recommended to use this with CloudFlare caching because airtable has a limit of 5 requests per second. Also, CloudFlare can give you nice analytics for free.

Usage

First, setup an airtable account with a base and table. The table should have a column for the short code and one for the long link.

Next deploy this github repo to netlify:

Deploy to Netlify

Then set the following environment variables in netlify:

DEFAULT_REDIRECT_URL -> https://example.com
AIRTABLE_KEY -> *****************
AIRTABLE_BASE -> *****************
AIRTABLE_TABLE -> URLs
AIRTABLE_SHORT_CODE_FIELD -> Short Code
AIRTABLE_LONG_LINK_FIELD -> Long Link
ENABLE_CACHE -> false

Note: AIRTABLE_TABLE, AIRTABLE_SHORT_CODE_FIELD, AIRTABLE_LONG_LINK_FIELD, and ENABLE_CACHE are showing the default values above. If that's what you call your table and fields then you don't need to set those variables.

Note also that you can use a .env file instead, just don't commit this to source control :) (this is useful for local development as .env is in the .gitignore).

Redirects should be setup automatically for you in the netlify.toml, so you shouldn't have to do anything there.

Now go ahead and test that your redirects are working as expected. Just go to the short URL version of your netlify app and it should redirect you like so: http://jsair.netlify.com/first -> https://javascriptair.com/episodes/2015-12-09/

If that works you're on the right track!

Next, set up Netlify with a custom domain then verify that the redirect works with the custom domain.

Now, go get CloudFlare setup with your custom domain to prevent your function from being called more than airtable's rate limiting can handle.

If you're not using CloudFlare, then set ENABLE_CACHE to true so you can get some caching from Netlify. That always seemed to not work very well for me though (which is one reason I use CloudFlare instead) so good luck.

airtable-netlify-short-urls's People

Contributors

horacioh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

airtable-netlify-short-urls's Issues

Netlify function requests will add up fast also

All Netlify sites include 125,000 function requests per month

This seems like a pretty generous number, but let's say we are using this domain for ALL our sites to redirect our shortened urls. There are going to be urls I just need redirected, but not tracked.

Not just because I want to save money, but because it will be faster than calling the function when there is not a need.

My solution is to create a _redirects file based on a flag in airtable that is a checkbox to build the static redirects that do not need to call our redirect function.

The solution uses a custom view by filtering on the static field. Of course this could have been named anything.
image

Notes:

  • The _redirects file gets overwritten on each build
  • The build will fail on a failure to build the _redirects file. ๐Ÿ˜€ (we want this)
  • These redirects do not need to be ignored or removed from the select view for our function, because they will not fall through to .netlify/functions/redirect
  • Maybe someone at Netlify can confirm for us whether it is safe to assume that redirects are handled in _redirects, netlify.toml redirects order.

@kentcdodds :

I have some experience with Netlify, so I was really intrigued with your video, so was thinking about how it would really help me to track the clicks for a url also. This led me to realize there are a lot of links I just do not need to track and slow down the redirect by calling a function, but I still want to have them shortened.
I have completed this code and did my tests on Netlify, just wondering if you are interested in including this in your solution. If so, I can PR and we can work on improving if needed or just discuss first here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.