Here we build an API that interacts with Webflow in order to update CMS and various other things.
Sending data to custom backend: https://youtu.be/nEcemSts0V4
Transcript
Hello and welcome to another episode of Webflow and Code where I teach you the underlying code you’re writing in Webflow.
Welcome to another one of my ever-changing locations if you didn’t know I’m a full-time Nomad and I’m uh I move around quite a lot.
I just wanted to take a moment to welcome all my new followers because my last video about improving your Webflow etiquette, let’s say, people seem to like it so I just want to welcome you guys.
This video is probably gonna go out after a couple of other ones I’ve already recorded So it’s a bit late but it’s better late than never of course so without further Ado let’s jump into the code and build our own API that integrates with the Webflow CMS.
So I haven’t planned this episode out much at all to be honest I’m just going to be jumping into it so uh it’s gonna be a little bit of a live coding session I’ll obviously edit it down to make it as efficient as possible.
Essentially we’re going to be building an API middleware where if we describe the architecture of it you’ve got your Webflow website and you’ve got a API that you build that then interacts with the CMS and there might be a number of reasons why you would want something like that you could be building your own plugin you could be just wanting to interact with the Webflow API in your own way maybe not through a form maybe it’s through an app on your phone or the possibilities are really endless when it comes to building your own API you’re just not limited to a form on your Webflow website but like I say as you’ll see that we’ll be we’ll be using an application for called Postman so I suggest you download that and what this will do it will help us test our API
We’ll run our API with an Express server and we’ll get into that and we’ll be hitting that API using Postman instead of building out a Webflow website because really the website website is it’s irrelevant to the the whole process really the the point is is that anyone that hits this API and this is a point of security just to remember anyone can hit this API and start adding stuff to your to your CMS but that’s not really much different to what you know someone going onto a Webflow website and filling out a form that enters something into your CMS so there’s not a lot of difference there you’ll need node on your computer installed you’ll need Postman.
You will also need a Firebase account because that’s going to be where the the thing that’s going to host our API now we could run it on an Express server on a Node server but these days a lot of this stuff can be done with Firebase functions which Lambda functions really or I think Lambda is the AWS name for it they are functions that literally just run when you hit that endpoint or when you hit that URL that’s when they’ll run you can run websites in this manner but we’re going to be running an Express server and then that’s going to be the thing that interacts with the Webflow API.
It’s worth noting that the reason why you have middlewares like this is because there’s an element of security Now to to be able to interact with an API it needs an API key and you might be used to some of that kind of API key nonsense API keys are to be treated like a password and you don’t want that password revealed on your website that interacts directly with the with the Webflow API you want to send your request to something else that then that has the permission to send it and then you can do a lot of error checking them within that have they sent the correct format of information is it from this the correct IP address loads of different things and we you know I’m not going to get into all those things now but you have that middleware that sort of the the gatekeeper of what goes in and out of that API.
So let’s look into the actual documentation of the Webflow API because I think it’s worth us drawing attention to to what I’m referring to essentially to just sort of make it look slightly less daunting the first thing we’re going to want to do is look at this authentication section and after reading it there’s auth2 which is which is helpful if you’re building an app that you’re going to sell on some sort of marketplace or something else and you want to build like a third-party application but what we’re going to be doing is interacting only and exclusively with your specific website and it asks you to generate a an auth key and you can do that from if you go to Project settings uh and here Integrations and then you’ve got API access now.
I’ve already generated an API and have it saved and again it really does warn you that you should be treating this like password do not share this with anyone this will give this one API or middleware that we’re going to build permission to integrate with the with the webflow API so that’s the first thing you want to do it says there’s an official JavaScript API client and what this does is give you a bunch of functions you can call instead of you writing what the request is now although this is great and maybe when we get a bit more familiar with what’s going on under the hood we can begin to use it but I feel like for not a lot of extra code we can really see and understand essentially what these functions are doing under the hood so I’m not really that fussed on using this JavaScript API at the moment just because for teaching purposes we might as well really understand what’s going on because there’ll be a lot of magic and you’ll get too confused and I’ll get too confused and then we’ll end up crying and cuddling on the floor together wallowing in self-pity.
Also while we’re here then we might as well look at the field types now these are all the different field types and you’ll be familiar with these because you can set these field types inside of the CMS and it will tell you kind of what the what the type is and what an example of that would be so if we’re going to be uploading an image or referencing an image of some sort then we need to we need to provide it a file ID a URL and an optional alt tag so do look into this if you are wanting to you know if you are facing issues or something like that then look into here and think okay well I’m trying to upload an email and this is what an email should look like so just as a point of no worth familiarizing yourself with that or at least knowing that it’s here so that you can kind of refer to it later on.
This actually gives us code Snippets that we can use to interact with the API but forgetting about that in the moment if we look on the right left hand side here we are we have got everything that’s available to us through the API the different things that we can do in the API right so we can look at form submissions we can look at we can list all our sites we can get a site we can look at web hooks this one we’re going to be mostly interested in we’ve got CMS things here so we can get a list of collections we can get a collection a specific collection and then this is this is really where we’re going to be digging into we can list all collection items we can delete we can create new ones we can publish collection items all of this sort of stuff we can do through the API so this really is where we’re going to be referencing or spending a lot of our time to understand what it is we can do what the code looks like that we need to write to actually do this do the thing that we want to do but you can also test the this sort of API and make sure that it’s running and all the rest of it so we’ll ultimately going to be copying this code but the real work comes in structuring it for Firebase functions.
So with all with all that aside let’s just start building this is going to be yeah like I say completely uh live coding and we’ll see how far we get thinking about what we need we’ve got Postman downloaded we’re gonna want to… I know that we can run a Firebase server locally so let’s just go straight in and start building a Firebase function project.
So Firebase function, get started so in the console add a project so let’s do that Webflow API looks good.
Google Analytics let’s not do that just because it will take longer to install which is installing our project.
Here we do need to upgrade the plan to be able to use Firebase functions now this is unless you’re doing loads and loads of requests I have yet to be charged on a blaze plan so I would I’m quite happy to do that Firebase payment that’s fine so you want to set up a payment thing and just set up something really small like five dollars cool add Firebase resources existing blah blah blah to create a new project we want to create a new product from this continue blah blah blah create project add Firebase setup node.js and the and the Firebase CLI so I have this installed already but why not let’s do that let’s copy paste that this is installing Firebase tools globally on our computer so that’s that there we go and that means we have access to some of the Firebase functionality and then we get to initialize the projects of Firebase login I think I’m already logged in and then Firebase login everything should be gravy there we go already logged in but you might be prompted login now I’m looking here we don’t we don’t need Firebase firestore this is database stuff so unless you want that sort of stuff go nuts but what we want is to initiate initialize a functions project let’s do that use an existing project so here we go you can see down the bottom here we want to use an existing project and then it should list out all of the projects we have Webflow API there it is God don’t you love it when technology works although I shouldn’t speak toosoon because…
I would go JavaScript I like Typescript but this isn’t a lesson on Typescript.
If you want to use eslint again it’s going to slow us down a little bit do you want to install dependencies with npm now yes let’s do that cool ignore so there we go
Now this is some basic code for an ad message and let’s just demonstrate this real quick so functions blah blah blah now we’re going to uncomment that and what this means is if we hit our project at the hello world URL we should see hello from Firebase but we need to run this as a server.
First here we go emulator Firebase emulator start let’s do that one cool.
So here is our URL so if I take that, this is this is just on our local machine not live or anything there and let’s open Postman we’re going to create a HTTP request all we’re going to do is paste that into the get function here delete that bracket and send lo and behold it’s responded.
We knocked back into our our project you can see that it’s responded here so now we’ve got Firebase running in on our computer and we can interact with it using Postman now it’s from within this project that we’re going to interact with the Webflow API.
Let’s start building that out now and do something very very basic with our Webflow project so we want to take that API key and store it as a secret in our projects that we can further kind of access it so you’re going to want to copy your API key I have my API key copied into my clipboard.
[I went down a bit of a rabbit hole trying to get Firebase Config to work but realised I should have been using .env files]
So we ran functions X config export which created those EMV files for us but if you haven’t done that you can just go ahead and create dot ENV and then add add your Azure API key and there and then from in here you go process dot ENV and then we saved it as Webflow key so let’s just get that save emulators.
Jjust because of all of this I’m going to be regenerating my API keys so you can go nuts with any API keys that you see because they’re not going to exist anymore so with that we’re running this looks like everything went through.
Great and there we go we have our API key at long last in our environment and if I deploy this now it will be up on the Cloud Server and we can access this from the World Wide Web so just want to reiterate you do not want to expose your API keys on the web and you’re also running your your exposing your CMS and any actions to the world.
Maybe we can do a follow-up on security but let’s just get through the basics right now so now.
Now we just want to set up a regular Express server and we can then start knocking back into this and start creating our Express apps so let’s turn the emulation off let’s install Express so let’s start doing this import Express we want to create an app. Copy the port here and start building our routes.
Now to explain this a little bit basically whatever our URL is the root URL we’re going to and it’s a get request we need to specify get request and I’ve gone over this in a in a previous episode uh somewhere down the line but we’re assigning a get request to the root of the URL and as a response we’re saying hello world now the difference here is that I like to put version one there we need to instead of this function here we’re going to return our app emulate this again.
in fact we don’t need the pause I’ll just remove that our URL will be updated because we added V1
and because we’re not we’re at the root here we’re sending a get request we should see Hello World hello world.
Boom boom boom we’re up we’re cooking on gas. We have an Express project running inside of Firebase functions.
Now let’s start interacting with Webflow the moment you have all been waiting for now we’re going to need to download node-fetch because no doesn’t have its own fetch Library installed so we’ll do that and you’ll see with each request we need to apply an authorization this is a basically the default function so if we just go ahead and at this end because it’s going to be stuff that we always use. In fact we can just change that to base.
You are l our Bearer token will be Webflow underscore API underscore key now we can make requests to this using good old fetch.
So we just copy this here so cons fetch equals require node fetch because we have installed now within here we can uh what should we do I mean let’s just list let’s just do something basic and let’s list our site.
Now we should only see one site because we of course have generated an API key that only Associates itself with one site so and it’s simply the URL is simply sites or you’ve got the URL up here so slash sites let’s just copy that.
Let’s go select go to sites equals fetch baseURL Plus sites and we want to add the options now they’re using promises I like async away just because it’s a bit cleaner so if we add async there and go await here then we want to data equals await sites dot Json now we can return it’s like data we can just return that data here.
Every async await should be in a try catch so let’s just do that and see what we get here.
Cool.
And now we have it so we’ve got an array of our sites and now we’re interacting with the website API.
So now let’s think about how we should some sort of best practices and how we want to kind of structure this so for a start when we hit the root we don’t want to return that you know the sites or whatever we want to make this into a logical route so how about first of all we what we really want to do is kind of match the Webflow API here so if we get sites then we want to make our URL get sites.
At this point you’re also responsible for the security of the application so if someone submits a piece of text or let’s say an email for example then you want to make sure that you’re then responsible to make sure that that email is an email address for instance
There’s kind of three lines of Defense here you’ve got your HTML kind of input being sort of required or that it’s that it’s a type email but of course those can be very very easily overridden so then you’ve got a second line of defense which is the JavaScript and you’re interrogating the data coming in from the JavaScript before it’s sent here and we’ll get into the the JavaScript side of things and then finally on the back end you’re validating the data again that you’re not sending uh incorrect data to Webflow and then they’re going to be doing a validation on their end so you can see how important security is when it comes to building back ends and applications because you’re starting to dig into the world of that right now.
Now we’ve got kind of everything working we sort of have these Baseline foundational things let’s actually start doing some basic operations on the collections let’s set up a route so that we simply list the collect collection items we’re probably not going to want to use this but just to kind of get the ball rolling so if we do app get which is the type of thing and this can be post it can be delete it can be patch but we just want it to begin um and then we just we just call it collections and we do async res wreck now these contain these resin wreck will
contain information about the data
that’s being sent but we’re not really
doing anything like that just yet so
let’s uh let’s just copy this code so
try catch we want to
um what are we doing collections
do collections collections
data and then going back into here it is
collection
list collection items okay so it’s it’s
for a specific collection so we will
actually need to provide some data
so let’s just copy this
and clean it up a bit
[Music]
so we’re going to be dealing with root
parameters now and uh this is exactly
what a kind of common convention here we
can get the parameters by doing request
dot parameters so
[Music]
so making that into a request parameter
we should be able to get it
uh const collection ID equals
request.params dot oops
collection ID
the important thing to remember is this
route is our root it’s our api’s root
when it comes to calling webflow we can
call any any route that we like after
once we call this one so just because
we’ve mapped these exactly the same
don’t think that this is calling webflow
right away this is just we’re just
setting up a route that our API can
accept so we have the collection ID if
we go if we go into the documentation
here we’ve got our base URL and then
we’ve got this here which we want to
stick here
now we want to do a bit of interpolation
here and we’re going to Simply replace
that with our The Collection ID that the
user has sent into our
into our root so now we have a new route
and so if we go back into Postman and
fire up this URL
items now we need to set this up to a
collection ID so where do we get the
collection ID from well if we go into
webflow and I’ve just realized that I
need to upgrade our plan once again to a
CMS plan so if you haven’t subscribed
already please do so it really means a
lot so I can do stuff like this and if
you like the video that will also help
me because more people get to see it and
I get to afford to do things like this
for you so my memory card run out of uh
space so just to quickly recap what
happened in the meantime is so I created
a collection we’ve got we’ve now got a
collection ID and heading back into our
code
we created a
a root here we’re setting a wild card
sort of parameter there and we’re
getting it through the request.params
dot collection ID as you can see that
those two match up there and then in our
request all we’re doing is
putting our variable in the URL that
webflow requires so if we head back here
list a collection item we can take a
look at that they require a collection
Item ID
they don’t require anything special it’s
just a get request to that URL okay so
if I quickly do that then I can write
request and then there we go we can see
our collection has got nothing in it
next we created a post request which
again matches webflow’s requirement for
creating a collection item so they want
a post we also set up a post the URL is
exactly the same it’s just the request
type that differs
so
once again we get that collection item
and we pipe it into the URL there are a
few other headings and things like that
for a start it needs a method of post
and it needs a content type of
application adjacent so what we’ve done
is we’ve created a new object here so by
opening and closing the braces we’re
creating a new object and we’re
spreading the existing default
parameters right and then we’re
overriding them
so we’re overriding the method with post
because that already that already exists
there and then we’re overriding the
entire headers one but spreading the
existing headers here so we’re getting
these two and then we’re adding our
content type here so in effect we’re
just overriding things that need to be
overridden and adding things that need
to be added
next we create a body
we pass in a body object which matches
exactly what they require where’s our
where’s our body updating for some
reason Quest example here we go
um
so we need to stringify because it needs
to be past a string a an object so
here’s the object and uh and it needs to
contain a field entry which matches
if we look at each of our people our
people collection we’ve got two required
information pieces of information here
right and we can add more as we go along
but for this basic example we’re just
going to use the defaults
and
when you post something that data gets
sent through the body and to do that
through Postman we select the uh the
forming URL encoded thing here and we
pass in a name of
Sam and that we assign we get that from
a little Crest body and we assign that
to our name here we can actually just
remove that to clean up a bit
now this slug is required but we do
something clever with the name we take
the name we make it all lowercase we
split any spaces that are in that name
and replace those spaces or at least we
join each of those items back up with a
hyphen and then we and then we just send
all that to our collection item where we
collection ID
now when I did it first time it wasn’t
it was just setting up as a draft I
didn’t want that I just wanted it to
publish straight away so you need to set
this query program of live equals true
and with all that oh we need to post and
change that to post
so there we go and you can see that the
name Sam is there the slug is lowercase
just to show you that it’s hyphenating
everything we’ll send another one and
there you can see it there
so that’s where I got to before I
realized my memory card was out of space
so looking back into here we can also
update which looks like it uses oh we
need it we need a specific item to
actually be able to update them and then
the same with delete so with that let’s
delete let’s just let’s just
let’s implement the delete so it’s a
delete method
and their method needs to be delete so
let’s just replace some of this stuff
here
and don’t need that
[Music]
that’s the same
and then the URL needs a collection ID
which we have and then it needs to an
item ID so let’s accept an item
ID
d
and get that from request param so
item idink so we’re getting those two
things and we need to replace this URL
with
our
Item ID
we don’t need to send anybody
we’re literally just sending this so
let’s change this now to delete by the
way inside of uh inside of Postman we
can create
we don’t need to keep replacing this we
can add just add a new request
people
delete and then we can name this save
and then we can name this collection
item and this would be also called
collection item
and then we can
duplicate that make it into a post
rename it
but I’m looking at the
I’m looking at the colors of these to
know which one I’m selecting so we can
just do that
blah blah blah try it again
perfect provided ID is invalid so how do
we get that ID well let’s go into here
and let’s look at this one the ID there
is the item id there
replace that there
deleted
refresh this to see this
and there you go it’s been deleted so
you can start to see how we’re building
this up now but rather than keep on
doing the same thing let’s start
implementing some sort of protection
into your roots so looking at this if
there’s no name because that’s required
then we actually want to respond
with please provide a name and this
could help us or or the users who are um
interfacing with our API to actually
provide the right thing so if we post
and go to body and we untick the name so
we’re not providing a name we should see
please provide a name in the back end
we can go a step further and say
if let’s say we want a first and second
name these are very basic examples so
please don’t consider this
a lesson on validation or anything like
that this is literally just showing you
what we need to do so if uh name dot
split this
oh we split a space
if there’s no that
if there’s no that please we can assume
please
provide first and second name as an
example
because it’s hitting it’s hitting that
and then continuing on and actually
making that post request and then
collecting again so
okay so I think it’s because of that
looks good
perfect
so I’m Gregory seven so it’s actually
okay we’ve got a few Sam gregories in
there okay so looking at that then that
could be another bit of validation you
could do you can actually get you can
make sure it’s Unique by looking for
um a slug that matches
Sam hyphen Gregory so with that you
could go const
um
uh what would we do we would get we need
to get an item
so list remove list collection item get
the list of items
collection point
data equals await
collection
dot Json
[Music]
and then we want to
Loop through all of these
all each item
[Music]
and let’s just log that out
turn that just so we don’t send anything
cool something’s broken but that’s fine
collection item data be careful oh
question 1940 is not a function data
okay let’s just log that and wouldn’t
expect that to be the case
but we might be surprised
invalid token provided
oh
yep
cool
okay so it’s an object and then it’s
items
so in here
we go
um items dot for each
just do that
and then we want to look at the name so
if
item.name equals the name that we pass
so if they’re exactly the same
then we want to return
res dot send
[Music]
um
uh this item already exists
and we want to break out of that four
each so I think
let’s do something else
let’s
um
there’s items internet items items
[Music]
let’s do this
foreign
to prevent uh duplicates here we’re
starting to
um really clean up and make sure we’re
interrogating the data that comes our
way you could say that you only want a
name to be a minimum set of characters
so we’re protecting web we’re not even
making a request to webflow First we’re
actually doing our own authorization and
things like that before we’re sending
anything to webflow we’re at the home
stretch right now this video has been
such a nightmare to film everything has
gonna go wrong space on the memory card
battery going out battery going out on
my laptop it’s just been a nightmare
it’s literally taking me hours anyway
let’s carry on with the final topic
which is everyone’s favorite cause sorry
[ __ ] that up cause
what is cause
um it’s basically a protection against
requesting data
between uh different websites right and
we want to basically make sure that our
website can only our API sorry will only
accept requests from a specific website
URL first thing we’re going to want to
do is
npm install
cause I ain’t simple straightforward
then we’re going to want to import it
[Music]
cause and then we’re going to want to
use it
let’s do this app dot use
cause
[Music]
now this in and of itself doesn’t really
do anything we actually want to specify
what URLs allow
from our uh origin we allow from our uh
from our API so looking at the cause
documentation here
we we use we basically enable calls on
all requests which is exactly what we
want to do but we want to configure it
from which URLs we accept requests from
so if we just set that to
example.com
make sure I’ve got that okay let’s
not right
and then if I remember rightly they also
might as well just do that just to be
sure uh cause use cause blah blah blah
and then close that now this will just
quite frankly enable calls on every
single request
we don’t have to do this according to
the documentation we can actually just
do it per function which is fine and
then we can have different options per
function but for right now we’re just
going to accept cores on every every
single function and if we deploy that
now I’ve set up inside of just this page
I’ve been working on
a basic request to our get uh sites
which all it does is just return
information about the site it’s very
very basic so that’s just a Fetch and if
I
publish this is you’ll get that classic
cause error saying that we’re not
cause to this URL are not accepted from
brandstrategy.webflow.com so
if we copy the URL
paste it into here
if I give this a refresh we have no
cause error and we’re actually returning
that data to the to the front end and
I’ve done that through our just a simple
fetch request so we actually have that
data there so to wrap all this up we’ve
built our middleware that interacts with
webflow we control everything inside of
this middleware and it has
Authentication
to directly
communicate with webflow we can do
whatever we want in here we do form
validation we can do data manipulation
we can do all sorts as completely within
our control we can add things we can
delete things anything that’s available
via the webflow API we can activate or
communicate with within our middleware
it really is up to us about how we
communicate with this API as long as
it’s from the selected domains that we
give it I hope this gives you a a
starting point at least to start digging
into building your own API having more
control over the manipulation of data in
the webflow back end and doing it safelyand securely I would definitely look more into authentication and I’m hope I’ll hope then to bring another tutorial specifically on the more authentication and bringing more security to it as I learn it myself look more into how you can validate the data as well and and think more about well what if someone does this maliciously or whatever and that would be really dependent on your use case so I can’t normally answer that really.
Have fun with it really first and foremost I mean just start learning how to create apis and all the rest of it I hope this was useful. Join my Discord because I love chatting to people over there if you have any questions for me or whatever please like subscribe all the rest of it and until the next time happy no coding