1. Technologies
2. Retool
3. Install Weavy

Install Weavy components to your Retool account

This tutorial will guide you through setting up authentication between Retool and Weavy and installing the Weavy components into your Retool account. Have Retool ready, and let's get started.

Prerequisites

You will need:

• A Weavy API key
• A Retool account
• Admin permissions in Retool
• Git
• Node.js

1. Weavy API key and backend

First we need an environment URL and an API key to communicate with the Weavy backend.

2. Clone repo

The repo contains everything you need to set up and configure authentication and use Weavy as custom components in your Retool app.

Start by cloning the repo:

git clone https://github.com/weavy-labs/retool-weavy-components.git retool-weavy-components

Upgrading? If you already have the repo in place and want to upgrade your installation, simply git pull the latest changes and continue this guide.

3. Install dependencies

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

npm install

4. Environment variables

We need the environment URL and an API key to communicate with the Weavy backend. To make this available for the scripts in the repo, we need to place it in an .env file.

Create an .env file in the root of your project folder with the following content:

WEAVY_URL="WY_BACKEND_URL"
WEAVY_APIKEY="WY_API_*****************"

Replace:

• The WEAVY_URL with the URL to your Weavy environment.
• The WEAVY_APIKEY with an API key to your Weavy environment.

5. Log into Retool

The installation scripts are using the Retool CLI and the Custom Components Library utils to create the demo.

• Make sure you have admin permissions in Retool.
• The login command will ask you to create an API access token with read-and-write scopes for Custom Component Libraries in your Retool account. See the Retool API authentication documentation for additional instructions on generating an access token. Make sure to copy or save the token.
• Login to Retool CLI and the Custom Components Library using the following command.

Log in to Retool CLI:

npm run login

Run this command in the project's root folder.

6. Install Weavy

Once you have your Retool authentication configured, you can run the installation script to upload and configure the Weavy components and the authentication workflow.

Run the script in the project root:

npm run create:weavy

The script will automatically configure the following:

• It sets a global WEAVY_URL Javascript variable. You can see it under Settings > Advanced settings > Preloaded Javascript in your Retool account.
• It creates a Weavy API resource for working with the Web API in your Weavy environment. This is configured with your Weavy environment credentials.
• It creates a WeavyAuthentication workflow for authentication token handling in the Workflows section in Retool. The Workflow is using the Weavy API resource.
• It creates a WeavyPageNavigation workflow in the Workflows section 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 Weavy API resource.
• It installs the Weavy components under Settings > Custom Components Library in your Retool account.

7. Done!

We now have the foundation to start adding Weavy features to your app.