Add Webflow Components to Your App

[Miguel]
By the way, I’m still stuck on the listings app.
[Grimur]
Appreciate your patience, Miguel.
Let’s fix that.
But first, let’s look at what we’re working with. We have our Anderson Group Inc. website, and then we have slash listings. A web app deployed to Webflow Cloud, with its code stored in GitHub and its property information managed in Airtable.
The properties load. The search works. The filters filter.
[Miguel]
But Miguel cannot leave.
[Grimur]
But Miguel cannot leave.
The problem? The marketing site and the web app aren’t working together as a complete website experience yet. Our app is missing the site’s navigation and footer.
That’s where DevLink comes in.
DevLink lets us export components from Webflow and use them in our app. So we can take the navigation and footer we’ve already designed, bring them into our listings app, and give visitors a way to move between the two. That’s what we’ll be doing and we’ll do that in six steps.
First, we’ll prepare our components in Webflow. Second, we’ll export them into our project using DevLink. Third, add them to the app, along with the styles, fonts, and interaction support they need.
Fourth, check our links. Fifth, push the updated code to GitHub so Webflow Cloud deploys it. And finally, test the whole thing on our site.
One important note before we start: these are exported copies of our Webflow components. If we change the navigation or footer later, we’ll need to export again, push the changes to GitHub, and deploy the update. Behind the scenes, these are more like copies of our components than actual connected instances of them. So, publishing the Webflow site alone doesn’t update the copies in our app.
We’ll show that too. But first, our components.
Here’s our marketing site. We have our navigation up here, and if we scroll down… our footer.
DevLink exports components, so we need to make sure both of these are set up as components in Webflow.
Ours already are. If yours aren’t, select the elements you want to include and create a component.
We’ve named ours Navigation and Footer. You don’t have to use those exact names, but clear names make them easier to find than something called Component seven. 
[Miguel]
That’s my favorite component. 
[Grimur]
(Smirk smiling at Miguel)
Let’s also add a Listings link to our navigation and point it to slash listings(and we don’t need the full url here, since the app shares the same domain as the site)
That gives visitors a way to get from the marketing site to our app.
We’ll check the other destinations shortly. For now, our components are ready to export.
Step two. Let’s bring them into our project.
This is the same Astro app from the previous lesson. We started with an app in a GitHub repo and deployed in Webflow Cloud. We already have our listings interface and our server-side connection to Airtable.
DevLink exports React components, so we’ll need to add React support to our Astro project. That basically means installing Astro’s React integration and adding it to the project’s config file.
[Miguel]
Already set up.
[Grimur]
Thank you, Miguel. Also, there’s a full written walkthrough on our developers.webflow.com website, you can always refer to that too.
We’ll need the Webflow CLI installed in this project. This lets us use Webflow tools from the terminal, including the command that pulls our DevLink components into the project.
Now, in the terminal, from our project folder, we’ll run the export command.
The first time we do this, we’ll authenticate with Webflow and follow the prompts to select our site and configure the export.
We’ll select the workspace.
And once that finishes, we have our exported components and their supporting files here in the project.
Depending on how you’re doing this, it varies in time how quickly you’ll get this up and running.
There’s Navigation. There’s Footer. And here are the styles that came with them.
These files are generated from our Webflow components. So when we want to change the shared design, we’ll make that change in Webflow and export again.
Now, exporting them doesn’t automatically put them on the page. 
That’s our next step. Step three. Add the components to the app.
We’ll import Navigation and Footer, then place Navigation above our listings interface and Footer below it.
The property cards, search, and filters are still here in the middle. We’re adding the shared site elements around them.
We need to include the exported styles and font loading. Otherwise, we might have the right components with the wrong appearance.
We'll also wrap our page with something called the DevLink Provider. A developer or coding agent can help with this setup. The things we’re checking are straightforward: do the components appear, do they look right, and do their interactions work?
We’re using Cursor, you can use whatever code editor you prefer.
And there we go. Our navigation is at the top. Our listings are underneath. And if we scroll down, there’s our footer.
Let’s narrow the browser window and open the mobile menu.
Nice. It opens, and we can close it again.
[Miguel]
I still can’t see it… 
[Grimur]
That brings us to step four.
[Miguel]
Of course it does.
[Grimur]
Our navigation now looks like the marketing site’s navigation. We need to make sure it takes visitors to the right places too.
The logo should point to slash, which is the homepage. Our Listings link should point to slash listings. And the other links should point to their corresponding marketing pages.
Pay attention to links that go to a section on a page.
If our Get in touch link points to a section on the homepage, using just hash get-in-touch would look for that section on whichever page we’re viewing.
From the listings app, we want slash hash contact, so it takes us to the homepage and then to that section.
We’ll check the footer links as well.
If any shared links need correcting, we’ll update them in Webflow, then export the components again to bring those changes into our project.
While we’re running locally, we won’t have the entire marketing website running here with the app. So we’ll check the destinations now, and test the complete journey once we’ve deployed.
Before that, let’s make sure our existing interface still works.
We’ll search for a property… change the location filter… clear that… and try a search with no matches.
Good. Our empty state still works too.
Let’s go and deploy it. Step five. Push the update to GitHub.
We already connected this repository to Webflow Cloud in the previous lesson. So we’re updating the same app, in the same environment, at the same slash listings path.
We’ll commit our changes, including the exported component files and the code that adds them to our page.
Then we’ll push to the branch connected to our Cloud environment.
That triggers a new build and deployment and we can check its progress here.
We’ll also publish the navigation changes on our Webflow marketing site, so visitors can see and use the new Listings link.
Publishing the site updates our marketing pages. The Cloud deployment updates our app.
[Miguel]
How’s it looking?
[Grimur]
Still building.
[Miguel]
I’ll just keep waiting.
[Grimur]
Okay. Our update is deployed. Time for step six: test the whole experience.
Let’s start on the marketing homepage. We’ll click Listings… And here’s our app, with the navigation and footer in place. Let’s try the search. Los Angeles. Here are our results. We’ll check the location filter too. Good.
And now… click the logo.
We’re back on the main site.
[Miguel]
Finally.
[Grimur]
(Smiles to Miguel)
Let’s go back to Listings.
[Miguel]
(Looks confused at Grimur, we just left)
Didn’t we just..
[Grimur]
One more thing.
We’ll check a footer link, then try the same journey for a mobile view.
Open the menu. Go to Listings. Open it again, and navigate back.
Everything’s working together. Visitors can get to the properties, use the app, and keep exploring the marketing site.
Now, before we finish, let’s make one small design update so we can see how we will maintain this.
Back in Webflow, we’ll change the navigation label from “Listings” to “Find a home.”
We’ll publish that change to the marketing site.
But remember: our app still has the version we exported earlier.
So, back in our project, we’ll run the export again.
Here’s the updated component. We’ll check it locally, commit the changes, and push them to GitHub. Again, you can always follow the guide on developers.webflow.com.
Once Webflow Cloud finishes deploying, we can open slash listings…
And now it says “Find a home” here too.
That’s the update process: make the component change in Webflow, export it into the app, and deploy the updated code.
The property information still comes from Airtable. So that information will still update through that connection and doesn’t require a new deployment unless something about the connection changes. 
We started with a working app that was missing our website’s navigation and footer. We brought those components in using DevLink, checked their links and interactions, and deployed the update with Webflow Cloud.
Now the Anderson Group Inc. marketing site and the listings app work together as a complete experience.
And Miguel can finally navigate wherever he wants.
[Miguel]
I’m looking at the listings again
[Grimur]
Why?
[Miguel]
I think I found my dream house! 
[Grimur]
You do know that these are not real right? 
[Miguel]
Not that with attitude.

‍