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
- A registered Webflow App, if you haven't created a Webflow App, read through our App registration guide to quickly get started.
- Node.js version
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.
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.
- Sign up for a free ngrok account
- Install ngrok via Homebrew by typing the following code in your terminal
$ brew install ngrok
- Authenticate ngrok with your auth token by typing the following code in your terminal
$ ngrok config add-authtoken <token>
- Start a tunnel to the port of your choosing by typing the following code in your terminal
$ ngrok http 3000
- Copy the forwarding URI from the session detail window.
- 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
/authadded to the end as the redirect URL. For example:
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.
- 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
- Customize the
.envfile 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
- Start your app
# Run the app npm run dev
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.
- Open your browser, and navigate to your ngrok forwarding link.
- Click the "Authorize with Webflow" button. This will take you to Webflow's authorization screen for the app you've just registered.
- 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.
- Click "List Sites" to make an authenticated request to the "https://docs.developers.webflow.com/v2.0.0/reference/list-sitesList Sites" endpoint.
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 3 months ago