How I Automated the Boring with JavaScript, Cloudflare Workers, and Airtable

want to know how to automate some of the boring parts of your life well in this video i'll show you how i used airtable and a cool technology called cloudflare workers to deploy serverless functions to do just that what's up everyone i'm james quick and if you're new to the channel just know that i do weekly and bi-weekly videos on web development related topics so if you're interested make sure to subscribe and check back in for future videos but in this video this one is sponsored by cloudflare and specifically cloudflare workers which is a way for you to deploy serverless functions in basically the fastest way possible so cloudflare has servers all across the world they will replicate your code all across the world so no matter where you call it from you'll get the fastest response in addition to that a lot of serverless frameworks or hosting providers have what's called a cold start so if you don't use that serverless function for a little bit the next time you call it there'll be a little extra bit of time that it takes to get a response well you don't have that with cloudflare workers so they're super fast and super easy to work with so in this video you'll see that we'll use javascript to develop ours we will use the wrangler cli to run it locally as well as publish it in the end we will use environment variables and if you need they also have the ability to do key value payer storage to access across your workers as well so if you enjoy the video and you're curious want to try it out yourself there's a link below for you to try out if you do end up doing anything with cloudflare workers i would love to know about it so let me know in the comments if you've used it before if you enjoyed it how did you use it and all of that said let's go ahead and dive in all right so before we dive in i want to give you a little bit of context as to what problem exactly i'm trying to solve so i write a newsletter every week if you're interested in this you can go to jamesquick.com newsletter and check it out but in every one of these newsletters each week i list out a couple of my recent videos so a couple of my recent youtube videos as well as recent recent videos or blogs from the learn build teach community so this is a discord that i run i'll link below if you want to join the discord community but my goal is to help promote those people so i want to promote their content i also want to share my content as well so every week inside of podio which is where i manage my courses and my email and stuff i i go in and i fill in these sections of recent videos and content from the learn build teach community and where i get these things from is inside of airtable i've started to use this to track a ton of my content recently so in in my content under promotion these are recently recently created or posted videos that i haven't really shared yet so i leave them here and then i would go and grab like the title and the link and then add them in the email also the same type of thing with the discord share so i grab the link in here and then uh the title and then who it's from and i add all of that in this email and i realize there's really no reason that i should have to do all of that that's way too much work for no reason so what i wanted to do was create a little a little worker here that would uh grab that information out of air table and then give me the information this is not going to look pretty but it gives me those links so i can just copy these in i don't have to format anything i just copy those in directly into air table or excuse me into podia and the email is basically ready to go so that's uh that's kind of the context here of what uh what the what i was trying to solve now let's get into actually trying to do this with cloudfair workers all right so i'm going to open up the getting started docs you can have these uh open for your reference as well if you need to uh first you'll need a free account and everything i'm doing here is free including airtable podia is paid but that's the separate story but the air table stuff is free and then the stuff that i'm doing inside of cloudflare workers is free as well so the first thing you'll need to do is install uh their tool for kind of working with these things locally uh and this is uh cloudflare wrangler so wrangler is gonna give us the ability to run a live reloading server locally and give us a few other configuration things as well as be able to publish our stuff to cloudflare so then we go in to the regular cli and we log in so we do a regular wrangler wrangler see a wrangler log in and this would uh allow it to open up a web page it'll bring me over it'll handle the login process yes i want to authorize this will then say all right you're good to go you can close the page and uh hey that thing is back now here uh but i'm logged in and that thing is working appropriately so we've got the wrangler cli tools installed we've got it configured now we can generate this new project so we do a regular i keep wanting to say regular wrangler let's cd into our code and my delete me for my demos let's do a wrangler what do we call it wrangler generate my worker too so we can give us give ourselves a second one all right so that will work uh that looks like it's good now let's open that up so inside of code inside of vs code let's open up my worker dash all right this will open up for us let's go ahead and make this big here make that full screen cool and let's just kind of look at what the starting code is most of what we have here is in the index.js and this says that we are going to listen for fetch request we are then going to respond with some sort of handler uh that handles the request and in this case there's only one handler this thing will handle the request and it will return back a response of some sort that includes maybe some information as well as any necessary headers like what type of information we want to return back once we get into once we finish this we will actually be returning html because the page that i just showed you the demo is actually returning html so that will be the goal as text html eventually so we've got uh we've got that set up and if you scroll uh scroll through here then it's hey write some code and so now we need to write some code to actually grab things from from air table and then generate the html templates for what we want so i'm going to create a utils folder here and then i'm going to create an air table air table js and then in uh airtable.js and a templates js and just for uh the purposes of this demo i'm going to go ahead and copy these in so source code link to the source code below so you can go and grab all that stuff and i'll explain everything of what's going on but let me copy an air table first so remember in air table there's two different places that i wanted to grab my information from there's the james q quick base is what they call it an air table and then there's the learn build teach base so those are two different bases that i need to grab information from and the information is slightly different so let's start with the two two main functions here get lbt learn build teach links and get jq links so this thing will make basically a regular http request to airtable following you can look at the airtable airtable api docs this will kind of show you how to make these requests and rest by default so if i look at jamesquick and i go to one of my tables the content table it shows you how to make these requests in curl where's the example of this oh we need to go down to a get list records there we go so here's a curl and it makes a request to airtable.com v0 and then the base id so you notice that is here so there's the this one is learn build teach base id and then you also have your api key so i need to make sure that i have the api key somewhere accessible to me but those things are private so i don't want you to see those i don't want anyone else to uh to see those so we'll come back to that um in a second and then uh let's do let's scroll down and you see the same type of thing so we uh query from airtable jq and we use the api key as well so there's three private credentials that we're gonna need to have or secret credentials well really the air table api key is the only one that's really private but i like to use environment variables just to abstract a little bit of stuff anyway so inside of these airtable api requests there's a little bit of query in here so this first filter by formula is saying i only want to get stuff that's emailable i've determined i've clicked the checkbox to say hey yeah i can email this thing out and then down here uh this is only stuff that is published and ready to promote and then also has i can't remember if i added the yeah archive does not fall so it's not already been shared and it's archived uh we get that data uh we then return a minified version of that data where we just strip out some of the uh information that i don't need and then flatten the information out so typically airtable will return an id and then a fields object i just want to put all those properties of fields right inside of the root object so we flatten this thing out and get some more streamlined data and then the next part of this is we copy in our our template so this is just a little file here to take in some records uh for learn build teach and jq and then we return back in html string so we create a list item for each one of these with an anchor tag to the link and the title who it's by if it's a discord user same exact thing for my links except uh it's always by me so i don't need to specify so we have those two little helpers there and then it's kind of ready to go so let's start let's start with just the index.js let's just publish this thing to see what happens and we'll need to update one thing inside of the regular wrangler i can't say that right the wrangler tomml configuration file and if we look inside of the getting started they'll actually reference this if we scroll down we need to do a wrangler who am i so let's do let's get rid of this message down here let's do who am i wrangler oh actually wrangler who am i i was like that didn't work at all that's because it should be this so i'm looking for my account id and what you'll want to do is take that account id and then paste it into this wrangler tamil file so that's just one of the things that you'll have to set up and then after that let me clear my terminal so we had that in place also workers dev here is is a configuration flag to say whether or not we're going to deploy this to our own custom domain i'm not i'm just going to take the built-in cloudflare workers domain not use my custom domain which i'm good with so workers dev will stay true if you want to do custom domains we'll add a link in the in the description below of how you do that all right so that is that is more or less ready to go we should be able to do a wrangler publish this is a javascript project there's one other thing inside of the configuration i'll need to show you and hey it looks like that thing is deployed so let's do on here i can command click open and this should just be just a hello world or hello worker okay so just to prove that that whole deployment process will work is what i wanted to show you so we've got that thing deployed out there it works now we can start to do the stuff that we really want to which is the helper stuff from air table and templates that we just created now to do this we're going to need to create our environment variables for those different properties so these different properties inside of air table the air table lbt base id api key and the jq base id so the way we're going to do these environment variables is come down to we have our secrets down here where's the secret part of this the wrangler secret put so wrangler secret put i will be able to put some key value pairs associated with our worker for environment variables and then we'll be able to access them with just the name so for example this would be wrangler secret put and then the real private one i have is my api key so the name of this thing is going to be airtable underscore api underscore key i say hey put that thing in there and then it's asking what the actual value is so i'm going to need to grab that value and put it in and you can hang on and uh and not look at my secret credentials all right so that uh that thing is in there i'm gonna run a similar command run another command for air table and then let's look at one of these keys the air table learn build teach base id so we'll put that in there and this is uh this is not necessarily so private you can actually see this but i don't really feel a need to so if you're using airtable a place where you can find that is inside of the docs inside of that of the uh the api docs and you can grab your thing from here so that's where that's where mine is for jq again not private because it doesn't do much without the without the api key itself and actually this should be the learn build teach one is what we're working on so let's go to learn build teach and let's grab that instead so let's go to discord share let's go to list records and this one will be the learn build teach one so here is the learn bill teach value that thing is created and then we'll do the airtable jq base id and i've got that still copied to my clipboard over here so there is the jq one now all three of those environment variables should be good to go and if we look inside of our cloudflare workers dashboard and then refresh that part two here should be here and if you go to settings that should be there as well so these are sick secret they're encrypted but they are now accessible inside of our code all right now let's go to our index.js and instead of just returning this basic piece of text now we want to actually use the functions from errors table and the templates directory so i'm going to import those the uh the two get links and then the two get links templates and then we'll go ahead and use those so we will say const lbt records is a weight i get lbt links and then same thing for mine so jq records and we'll await get jq links and then from those records we'll take them to generate our templates so we'll say this is the learn build teach template and this is get i'll be t links template passing in the lbt records all right and then same thing for jq so jq template and i get jq links template passing in jq records as you would probably expect now the last thing is i want to combine those and put a separator in between them so let's do a return template is going to be the learn build teach not records but template plus and then we'll just add in a br for this html and then we'll do the jq template as well so that'll be the thing that we want to return and we want to return this thing inside of here so we want to return the return template as you might expect and then also change this text to html so that's cool that uh that looks good and will work well the one thing we need to do is inside of our wrangler tommel we need to make sure that it is ready to do uh do some uh do some webpack stuff for us so instead of this just being regular javascript since we're using imports and that kind of stuff we need to make this and yeah just uh we need to just make this a webpack type so we need to change the type here to be webpack to make sure that that thing is ready to go and grab the other files that we have in different places uh so let's do let's try to run this locally let's do a wrangler dev and uh this will start up the local uh the local server where we can be able to access this uh this worker locally at localhost 8787 so let's open this localhost 8787 and hopefully what we'll see is it will come back with all of our links so it looks like this stuff is working and at this point i could grab all of this stuff copy it into podia and be good to go now the other thing or the last thing we need to do is let's go ahead and actually publish this thing to make sure it's really working so we'll do a wrangler publish we did this earlier but this will send this uh send this stuff up again it will then be updated i don't know if we'll see a little update in here under workers i think we'll see a last modified maybe last deployed six minutes ago if we update or refresh the page last deployed seconds ago then we open this link and now this deployed link myworkerdash2.jame2quake.workers.dev is ready to go now anytime i do a newsletter i can hit this url i can grab this this information take it into podia and not really have to worry about much else now the other thing i want to do is i could do this with upcoming stream as well so the way i have the title the image the link i could actually and probably will update this worker to generate all of this html so i take like three three quarters of my newsletter now or completely automated once i do that and then just dump it into podia and be good to go so anyway i thought that was a pretty uh maybe simple use case depending on how you look at it it doesn't look very pretty but it's extremely useful because the amount of time that i spend uh copying and pasting links in in text and it takes 10 or 15 minutes to do that versus now i can load a url copy and paste it in so it takes 15 30 seconds maybe instead of 15 minutes so it's a really big benefit for me uh this stuff is uh really fast pretty uh pretty easy to set up once you get used to it anyway it worked out well so if you enjoyed what you saw make sure to give cloudflare workers a shot there's a link below in the description if and when you do let me know in the comments below what you did with it and how you enjoyed it and if you have any feedback to pass on to them share that in the comments below thanks as always for checking out the video and i'll catch you in the next one

Channel: James Q Quick

Views: 7,854

Keywords: cloudflare workers, cloudflare serverless functions, airtable and cloudflare workers, airtable automations, airtable scripts, cloudflare workers javascript, cloudflare workers tutorial, javascript tutorial, web development tutorial, airtable tutorial, learn how to build automation, serverless functions, jamstack, cloudflare cdn, cloudflare workers custom domain, cloudflare workers api, jamstack tutorial, wrangler cli, wrangler dev

Id: tFQ2kbiu1K4

Length: 18min 35sec (1115 seconds)

Published: Tue Mar 09 2021