Deploy an App with Webflow Cloud

This is Anderson Group Inc, a real estate company with a marketing site built in Webflow. And yes, it's a totally made-up real estate company.
But. Their property listings live in Airtable. And we want visitors to browse those listings, search for a property, and filter the results, all from the Anderson Group Inc website.
So. We already have an app with that interface. But right now, it runs on our computer(or actually it runs on Miguel's computer) and uses sample data. So it looks like a listings app, it just can’t be accessed by visitors from the main site yet. 
In this lesson, we'll briefly look at the app we've built, we’ll connect it to Airtable(to get that real data), we'll make sure everything is securely set up… before we deploy the app from GitHub using Webflow Cloud, and finally, we'll test it all out.
By the end, Miguel and other visitors will be able to go to slash listings on this Webflow site and browse properties from that Airtable database. Let’s look at the application we have going on... which is on Miguel's computer...
(Miguel)
That’s right, but I’ve already set things up on your computer.
(Grimur)
Of course you did. Thank you. 
This is our starting point: an Astro app with its code stored locally, later, we’ll also have it up in a GitHub repository, here on the main branch.
We already have listing cards, a search bar, and filters for price and location. There’s also a message for when nothing matches our search, and basic error handling if something goes wrong.
We’re starting with those pieces in place so we can focus on connecting the data and getting the app live using Webflow Cloud. BUT. When it comes to coding your app, that’s something a developer or even connected agent like Claude Code or Cursor could help you with. 
Webflow Cloud currently supports apps built with Astro, Next.js and Vite. So make sure your app is compatible before you start deploying. Also, drink water. 
Okay, back to our app here. Right now, these properties come from a sample file inside the project. That helped us build and test the interface. But changing a listing means changing that file. So if Miguel changes something locally on his computer, nothing happens on mine.
[Miguel]
I just changed something on mine, do you see it?

[Grimur]
No Miguel, that’s the point.
But. We want the Anderson Group Inc team to manage their properties in Airtable, and have the app read those records.
So how do these things come together?
Here’s our Airtable base. Each record is a property, with fields for its title, address, location, state, price, bedrooms, you get the idea.

[Miguel]
(At the same time as Grimur)
Title, address, location, state, price, bedrooms, you get the idea.

[Grimur]
(Looks impressed at Miguel)
The app needs to read those records and connect the data to where it belongs in the listing cards we just saw. 
To do that, we’ll add a server-side API endpoint. And what the heck does that even mean? That means that it’s a part of our app that receives a request, gets the records from Airtable, and sends the listing data back to the page.
But why do this on the server? We're doing that, because accessing Airtable requires a personal access token, and we need to keep that token out of the code we send to visitors’ browsers.
So here's the plan: the page will ask our server for listings, our server will use a token to request them from Airtable, and it'll return just the fields visitors need to see.
The cards and filters are already built. We're changing where their data comes from, but first, let's make sure that connection is secure.
We’ll create a personal access token with permissions to read records from this base.
For local testing, we'll store the token in a file that never gets committed to Git, our code just refers to it by name, and Git is told to ignore that file entirely. 
So the token lives on our machine, but it's invisible to GitHub. Once we deploy, Webflow Cloud runs that same code, and we'll give it the same token a different way, through its own environment settings, not a file.
We’ll also provide the base ID and table ID, so the app knows where to find our properties. We’ll add it here to the .env file. One note here, it’s important to include the full Personal Access Token
Before we run it, let’s restart the server here… 
Now let’s run it locally.
These are our Airtable listings. Let’s change the location here, that works well, and now let’s go over to Airtable, we’ll just update the price here(just typing in a random number)… and… it updates on here as well. 
Good. We’ve connected the app to the data locally. Next, we’ll get set up to deploy the connected app in Webflow Cloud.
Okay, here in GitHub, we have our app set up and ready to go, so let’s go over to Webflow and open Anderson Group’s Inc site settings and we’ll go to Webflow Cloud.
First, you want to connect your GitHub. If you're not logged in yet, go ahead and do that now, we're already logged in, next, we'll go to new app and create app. And here we’ll import a GitHub repository (we already have our app uploaded to GitHub)
Finally, we'll select the repository that holds our listings app.
In Webflow Cloud, an environment is where your app gets hosted and deployed, tied to a specific branch of your github repository. We'll choose the branch to deploy, we have the main path here, and that's the URL where visitors will actually find the app, to slash listings. Up here, we can keep the name up here as is, that’s fine. 
Next, here under the advanced settings, we add the Airtable settings to this Cloud environment and mark the access token as a secret. Our server-side route reads it from there. We’re just adding the variables needed and pasting in the information here. 
Let’s deploy it.
Webflow Cloud builds the app and deploys it to this environment. Future pushes in GitHub to the connected branch trigger another deployment. But while this is building…
[Grimur]
Miguel?  

[Miguel]
What? 
[Grimur]
Nothing. 
[Miguel]
(Confused face)
Okay, it looks like it is done, we’re ready to test it on the site.
App deployed. A few options, we can open up the app or we can click to manage it, let’s do that… here you have an overview of your deployments and everything related to the app in your Webflow Cloud.
Let’s open this url HERE and we go straight to our listings app.
Let’s try the location filter, nice, it narrows the results by location. Let’s clear it up. We’ll also try a search, let’s do Los Angeles, that works, let’s try New York, and it has no matches… our empty state is working too. 
Let’s go and check the data connection itself.
We’ll go over to Airtable and change its price(we’re just doing a random number here again), and let’s also change the name. Back over to our app(our website), it should automatically refresh… alright, there we go. 
Here's the updated price and name. 
That confirms the app is reading our Airtable records. We changed the property data without editing the app’s code or deploying it again. 
Super convenient for the team at Anderson Group Inc and Miguel
[Miguel]
I just updated EVERYTHING
[Grimur]
(Nods and smiles at Miguel)
We started with an app running on our computer, using sample listings. Now it reads real property records from Airtable, and it's live on the site at slash listings.
But visitors still can't navigate back and forth to the rest of the site, that's the next video. 
We'll add the Anderson Group Inc navigation and footer so it feels like part of one website, not a disconnected app off to the side. 
[Miguel]
I’m on that listings page and I can’t navigate to the main site.
[Grimur]
Exactly…

‍