Skip to content

Latest commit

 

History

History
73 lines (49 loc) · 3.19 KB

README.md

File metadata and controls

73 lines (49 loc) · 3.19 KB

Webflow CMS API Examples

Welcome to the Webflow CMS API Examples repository. This repository includes both backend and frontend code samples to help developers get started with the Webflow CMS API. Follow along with the Webflow CMS API Documentation to learn more.

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.

Local Environment Setup

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

  1. Clone the repository:

    git clone https://github.com/Webflow-Examples/cms-examples.git
cd cms-examples

  2. Install dependencies:

    npm install

  3. Set up NGROK:

    • Ensure you have an NGROK account and get your NGROK auth token. Follow instructions on setting up and configuring your local environment using NGROK.
    • 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, follow the steps in the documentation to register an App with Webflow and store your App's Client ID and Client Secret in the .env file in the root directory.

App Configuration

For this code sample to work correctly, some setup is required in the Webflow App dashboard:

  1. Add the correct scopes: Make sure your App has the following scopes:

    • sites:read - Allows listing and reading site information.
    • cms:read - Permits reading CMS content.
    • cms:write - Enables your App to modify CMS content.

  2. Configure the Redirect URI:

    • Once the App is running (see below), NGROK will display your Redirect URI in the console
    • 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 App by navigating to the Frontend URL.

Explore and modify the code to learn more about the Webflow CMS API. If you have any questions or run into issues, please open an issue in this repository.