Webflow apps offer a world of potential, especially when it comes to hybrid apps, the versatile app types that include both server-side and client functionality. While Webflow has a thorough guide for using the hybrid example app with codespaces, I wanted to share an example of running it locally using NGROK. Webflow needs apps to use a publicly accessible HTTPS URI for redirects. Ngrok allows you to do this while testing locally. This approach is useful if you're thinking of using the hybrid app example as a foundation for your future integrations.
About the Hybrid app example
The hybrid app example enables users to generate images using OpenAI’s Dall-E and add them to their Webflow assets. I'm fond of this example for several reasons:
It's built on Next.js, offering a glimpse into constructing data-client apps in this framework.
It illustrates the process of integrating third-party APIs within Webflow’s Hybrid apps.
It highlights how data from these APIs can be channeled into designer extensions, allowing users to view the info directly within Webflow.
It’s a demonstration of functionality that you could use to build many different kinds of hybrid apps within Webflow.
Running the Hybrid App with Ngrok
Before diving into running a Webflow hybrid app locally using Ngrok, make sure you meet the prerequisites. These tools and accounts are crucial for following along with this guide.
Once cloning is complete, switch to the new project directory with:
Step 3: Set Up Ngrok
Webflow needs apps to use a publicly accessible HTTPS URI for redirects. Ngrok allows you to do this while testing locally.
While these instructions largely follow Webflow's own guide, note that for the hybrid example, you should use port 3001 instead of 3000 and set the redirect URI to /webflow_redirect instead of /auth.
Install: In your terminal, run $ brew install ngrok.
Authenticate: Use $ ngrok config add-authtoken <your-token> to add your auth token.
Start Tunnel: Open a tunnel on port 3001 with $ ngrok http 3001.
Configure Webflow App: Copy the Ngrok forwarding URI. Set this as your App's homepage in Webflow.
Add /webflow_redirect to the end of this URI for the Redirect URL. For example: https://939c-136-33-253-184.ngrok.io/webflow_redirect.
Step 4: Set Up Environment Variables
Create an .env.local file in both the data-client and designer-extension folders.
Add the following variables:
NEXT_PUBLIC_BACKEND_URL='your_NGROK_URL example https://939c-136-33-253-184.ngrok.io/'
Step 5: Install Dependencies
Run npm install in the data-client and designer-extension folders as well as your main folder.
Step 6: Run the App
Execute npm run dev to start the app and log in
After authorization, copy your token
and then log into your test site, and launch your development app to start generating images
There you have it! If you try running the Webflow app example locally, I'd love to hear about it. Drop me a tweet at @ojabowlola or send a quick note to email@example.com. Always keen to learn and connect!