Working with the CMS

What We’ll Build

In this guide, you’ll create a Data Client App that interacts with Webflow’s CMS APIs. The frontend, built with React, will display data fetched from the Webflow CMS. The backend, powered by Express, will handle authentication and API calls.

Prerequisites

A Webflow site. If you’re not sure where to start, clone our Astral Fund site with defined CMS collections.

A Webflow App or a Site Token with the following scopes: sites:read, cms:read, and cms:write

An Ngrok account and an authentication token

Node.js and an IDE of your choice.

Additionally, you should have basic knowledge of Node.js and Express.

1. Setup the development environment

2. Initialize the Webflow Client

3. Controllers and Routes

4. Configure Collections Endpoints

5. Configure Items Endpoints

6. Setup the Server

7. Making Requests

Conclusion

Congratulations! You’ve successfully navigated through the process of setting up and using the Webflow API with a fully functional backend and frontend application. Here’s a quick recap of what you’ve accomplished:

Webflow Client and Backend Configuration: You configured the WebflowClient, set up middleware, and created routes and controllers for managing collections and items.
Working with Collections: You learned how to create, retrieve, and delete collections, including handling different field types.
Working with Items: You explored how to create, retrieve, update, and delete items within a collection, managing various item states and field types.

Next Steps

Extend Functionality: Enhance your application by adding new endpoints - try updating an item - or incorporating additional data processing logic.
Explore Localization: Managing content localization is a crucial part of working with the Webflow CMS. Check out our localization guide for more details on how to localize your content effectively.