We’ve prepared a starter code for you to follow along with. This code already takes care of the OAuth Handshake and initializes the Webflow Client as shown in our Authentication guide. You’ll be able to start this App, authenticate the App, and start making requests to the Webflow CMS API.

1. Clone the starter code.
   Run the following commands in your IDE to clone the example repository and install dependencies:

   Shell

   $
   git clone https://github.com/Webflow-Examples/cms-examples.git
   >
   cd cms-examples
   >
   npm install

2. Add Environment Variables
   Add your credentials to the .env file. If you’re using an App, input your App’s CLIENT_ID and CLIENT_SECRET. If using a Site Token, input the token as SITE_TOKEN.

3. Add Ngrok Auth Token
   Ngrok is required because Webflow Apps must run on https:// URLs, and Ngrok provides a secure tunnel for your local server.

   Get your Ngrok auth token from the Ngrok dashboard. Then, add your token to your environment variables in .env:

   Shell

   $
   NGROK_AUTH_TOKEN=your-ngrok-auth-token

4. Start the Server
   Start the server by running npm start in your terminal.

   This will output list of URLs in the terminal to access your server and your frontend.

   

5. Update your Redirect URI in Webflow
   Copy the redirect URI from your terminal output. Navigate to your App in the Webflow Dashboard Settings and update the Redirect URI to the URL for your server.

   

6. Authenticate the App
   Open the URL for your server in the browser. You’ll be prompted to authenticate the App with Webflow. You have the option to authenticate a single site or all sites on a single workspace.

7. Start making requests
   Once authenticated, you’ll be redirected to the App frontend where you can select an authorized site and start making requests to the Webflow CMS API.

   

Our backend is built using Express and Node.js, and designed to handle requests from our frontend.

When a request is made to our server, it is first passed to our middleware function defined in webflowClientMiddleware.js. This function initializes and authenticates the Webflow Client and attaches it to the request object, so we don’t have to re-authenticate in each request. This client is then used in our controllers to make requests to the Webflow CMS API.

In the controller files, requests will be prefixed with req. followed by the standard Webflow SDK methods. For example, to interact with collections you would use req.webflow.collections.items.listItems().

1
import { WebflowClient } from "webflow-api";
2
import { getToken } from "./auth/tokens.js";
3
4
// Middleware function to initialize the Webflow client and attach it to the request object
5
const webflowClientMiddleware = async (req, res, next) => {
6
try {
7
  // Retrieve the access token for the user using Auth Logic defined in our auth guide (https://developers.webflow.com/data/reference/authorization)
8
  const accessToken = await getToken("user");
9
  if (!accessToken) {
10
    // If the access token is not found, log an error and send a 401 Unauthorized response
11
    console.log("Access token not found for user");
12
    return res.status(401).send("Access token not found");
13
  }
14
15
  // Initialize the Webflow client with the retrieved access token
16
  req.webflow = new WebflowClient({ accessToken });
17
  // Proceed to the next middleware or route handler
18
  next();
19
} catch (error) {
20
  // Log any errors that occur during initialization and send a 500 Internal Server Error response
21
  console.error("Error initializing Webflow client:", error);
22
  res.status(500).send("Failed to initialize Webflow client");
23
}
24
};
25
26
// Export the middleware function for use in other parts of the application
27
export default webflowClientMiddleware;

Now that we’ve handled setting up authorized requests, let’s take a look at how we’re making requests to interact with collections and fields in our App. All of our logic for interacting with the Webflow CMS API is located in the Controllers folder.

In collectionsController.js, we’ve defined five methods for interacting with collections. Let’s review each method in detail:

With our collections set up, we can start creating items within them. In itemsController.js, we’ve defined methods for creating, reading, updating, and deleting items.

Lastly, we’ll take a look at how we can publish and unpublish items using the Webflow CMS API.

Publishing items

• A full site publish: When you publish your entire site, any collection items with isDraft set to false will be published. You can publish the site through Webflow or using the publish site endpoint.
• Single-item publish: You can publish an item immediately, without publishing the full site, using the publish item endpoint. Even if an item is set to isDraft: true, it will be published when using this endpoint.
• Live Item Creation: The CMS API offers two options for item creation, creating a staged item or a live item. Creating a staged item will set the isDraft property to true, while creating a live item will set it to false and immediately publish the item upon creation. This endpoint is useful for immediately publishing items from an external CMS or other data sources.

Unpublishing items

Webflow also allows you to unpublish collection items by using the unpublish item endpoint. This will remove the item from the live site, and set the isDraft property to true.

Publishing 'Status' in Webflow

The Webflow UI shows a status for each collection item. This status is derived from the isDraft and lastPublished properties of the item. See the table below for more details of which status is shown based on these properties.

lastPublished	isDraft	Derived status
null	false	Queued to publish
exists	false	Queued to publish
null	true	Draft
exists	true	Draft changes