<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
Guide

Create a Superblocks boilerplate app with Weavy components

This guide will help you create an empty Superblocks app and with all the needed parts to use Weavy components with simple drag-n-drop!

1. Weavy API Key and backend

We need an API key to communicate with the Weavy backend.
 

2. Create a Weavy API Integration

We need to create a bridge between Weavy and Superblocks. We'll define a new WeavyAPI REST integration. This is where you securely can configure the server connection to the Weavy backend.

  • Open the integrations page in Superblocks and click Add integration.
  • Add REST API.
  • Name the integration WeavyAPI. Make sure you get the name right as it will be referenced later.
  • Use WY_BACKEND_URL as Base URL.
  • In Authentication, select Bearer Token.
  • Copy the masked API key below as the Token.
  • Add a Header with the key Content-Type and set the value to application/json.
  • Click Create to save the integration.
Weavy API Key 
WY_API_*****************
superblocks-rest-api-1

3. Clone the repo

The repo contains everything you need to set up and configure the demo app and a template for using Weavy as custom components in a Superblocks app.
Clone the repo 
git clone https://github.com/weavy-labs/superblocks-weavy-components.git superblocks-weavy-components

4. Install dependencies

Change your directory to superblocks-weavy-components and run:

Install 
npm install

5. Log in to Superblocks

The component repo is using the Superblocks CLI to work with the custom components. Log in to your Superblocks account.

Log in to Superblocks CLI 
npx superblocks login

6. Create the boilerplate app

Once you have your Superblocks authentication configured, you can run the create:template script to upload and configure the Weavy workflows and create an empty app with Weavy components and all additional parts needed.

During the installation you will have to deploy the created workflows to make them available for your apps. Just follow the instructions in the terminal to open the workflows in the browser and deploy them.
Run the script in the project root 
npm run create:template

The script will automatically configure the following:

  • It creates a WeavyAuthentication workflow for user authentication token handling. The workflow is using the WeavyAPI you created.
  • It creates a WeavyPageNavigation workflow for saving page metadata that is needed by Weavy Notifications to be able to navigate back to the container their content originated from. The workflow is using the WeavyAPI you created.
  • It creates a demo app called WeavyDemo that has the Weavy components installed and configured.
superblocks-workflow-deploy

7. Done!

Click the link in the terminal window, and there we have it - a complete Superblocks boilerplate template with Weavy components.

Start adding Weavy components by just drag-n-dropping them onto your canvas from the Add components panel.

Start playing with the components and have a look at the other tutorials to add more features!

superblocks-app-template
On this page

What's next?

Now, let's add our components to your Retool apps and make it a collaborative powerhouse

All tutorials
Ask AI
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account