DocsAPIsChangelogResourcesMarketplace
DocsAPIsChangelog
DocsAPIsChangelogResourcesMarketplaceSearchLog In
Search

4. Quickstart: Data Clients

Suggest Edits

Now that we've gotten a good handle on what Data Clients can do, let's try creating one ourselves.

In this guide, we'll:

  • Setup your local development environment
  • Create a server and run a starter Node.js App
  • Authenticate our App via OAuth 2.0 and make your first REST API call

Prerequisites

📘

Before you start

In this guide, we will be creating a server-side Node.js app. To follow along, make sure you have Node installed on your computer, as well as the latest version of npm.

Step 1: Setup your local development environment

Before we start working with our app, we'll want to configure our development environment so that we can connect with Webflow.

Webflow requires apps redirect to a publicly-available HTTPS URI, which can be tricky when testing locally. In this guide, we'll be using ngrok, a service that grants you a unique, publicly accessible url that proxies all requests to your locally running webserver.

  1. Sign up for a free ngrok account
  2. Install ngrok via Homebrew by typing the following code in your terminal
    $ brew install ngrok
  3. Authenticate ngrok with your auth token by typing the following code in your terminal
    $ ngrok config add-authtoken <token>
  4. Start a tunnel to the port of your choosing by typing the following code in your terminal
    $ ngrok http 3000
  5. Copy the forwarding URI from the session detail window.
  6. Change the Application Homepage and Redirect URIs in your App. To view your Client ID and secret, find your app in the Workspace Applications section in the Integrations pane. Click the "View details" button to make changes. Set the ngrok forwarding URL as the app's homepage, and the forwarding url with /auth added to the end as the redirect URL. For example: https://939c-136-33-253-184.ngrok.io/auth

Step 2: Launch a starter App

To help you get started faster, we've created a Node.js App that will handle authorization and allow you to make your first request to the Webflow API.

  1. Clone the starter app repository and install dependencies
# Note: If on Windows, run
# git clone -c core.symlinks=true https://github.com/Webflow-Examples/oauth-hello-world
# instead to ensure correct symlink behavior

git clone https://github.com/Webflow-Examples/webflow-app-starter-v2

# Install dependencies
npm install
  1. Customize the .env file with your own Client ID and Secret, as well as the forwarding address from ngrok and the port of your choice. 
# You can get your client credentials from your workspace dashboard
WEBFLOW_CLIENT_ID=XXXXX
WEBFLOW_SECRET=XXXXX

# If testing with Ngrok, get the forwarding url from the session detail window.
SERVER_HOST=https://XXXX.ngrok.io
PORT=3000
  1. Start your app
# Run the app
npm run dev

Step 3: Install your starter App and make your first API call!

Now that your App is running, let's install it to a Webflow Workspace, and make our first call to the API. App will direct a user Once selected, Webflow will redirect the user back to the App where we can make our first request to the sites API.

  1. Open your browser, and navigate to your ngrok forwarding link.
  2. Click the "Authorize with Webflow" button. This will take you to Webflow's authorization screen for the app you've just registered.
  3. Choose the Workspaces and/or Sites the app should be allowed to access, and click "Authorize Application." Webflow should direct you back to the App's home screen.
  4. Click "List Sites" to make an authenticated request to the "https://docs.developers.webflow.com/v2.0.0/reference/list-sitesList Sites" endpoint.

🎉 You did it!

Your app is now set up to get authorization from users, authenticate via OAuth 2.0, and make requests to the API. Onwards and upwards!

Updated 8 months ago