/cms-examples

Data Client App example using Webflow CMS APIs. Built w/ Express and React

Primary LanguageJavaScript

Webflow CMS API Examples

Welcome to the Webflow CMS API Examples repository! This repository is designed to help developers get started with the Webflow CMS API by providing both frontend and backend examples.

Table of Contents

Overview

This repository contains examples to introduce developers to the Webflow CMS API. The project is split into two main parts:

  • Frontend: A React project that allows users to interact with the backend using interactive dropdowns, buttons, and forms to make calls to the backend server and retrieve information about the Webflow site and collections.
  • Backend: An Express server that authenticates users, stores tokens in a SQLite database, and makes API calls to Webflow, returning the responses to the frontend.

Setup

To get started with this project, follow the steps below:

  1. Clone the repository:

    git clone https://github.com/your-username/webflow-cms-api-examples.git
cd webflow-cms-api-examples

  2. Install dependencies:

    npm install

  3. Set up NGROK:

    • Ensure you have an NGROK account and get your NGROK auth token.
    • Store your NGROK credentials in your environment variables: 
      export NGROK_AUTH_TOKEN=your-ngrok-auth-token

  4. Create and Update Webflow App: If you don't already have a Webflow app, create an app by following the directions outlined here.. Store your App's Client ID and Client Secret in the .env file in the root directory.

Authentication

To authenticate the app, some setup is required in the Webflow app dashboard:

  1. Add the correct scopes: Make sure the app has the following scopes:

    • sites:read
    • cms:read
    • cms:write

  2. Configure the Redirect URI:

    • Once the app is running, you will be provided with a Redirect URI.
    • Input this URI into the Redirect URI settings in the app dashboard.

Running the Example

To start the project, run the following command:

npm start

This will start both the frontend and backend servers. With NGROK set up, a secure tunnel will be established, and you will be able to access the application.

Feel free to explore and modify the code to better understand how to interact with the Webflow CMS API. If you have any questions or run into issues, please open an issue in this repository.

Happy coding!