This is a starter template for Storyblok tools, created with Next.js (Pages Router) and @storyblok/app-extension-auth.
npx giget@latest gh:storyblok/space-tool-plugins/tool-plugins/nextjs-starter YOUR-PROJECT-NAME
Navigate to your project folder and install dependencies by running:
cd YOUR-PROJECT-NAME
yarn install # pnpm install or npm install
Set up a secure tunnel to proxy your request to/from localhost:3000
, for example, with ngrok:
ngrok http 3000
Note down your assigned URL; this will be your baseUrl
for the application.
There are two ways on how you can create a tool inside Storyblok. Depending on your plan and use case, choose one of the following options:
- Open Storyblok's Partner Portal Extension View
- Click On New Extension
- Fill in the fields
name
andslug
- Select
tool
as extension type - Click on Save
- Open Storyblok's Organization Extension View
- Click On New Extension
- Fill in the fields
name
andslug
- Select
tool
as extension type - Click on Save
Once the tool has been created, a new entry will appear inside the extension list. Open it and navigate to the OAuth 2.0 and Pages
tab.
Configure the following properties based on the previous steps:
- Index to your page:
{baseUrl}
- Redirection endpoint:
{baseUrl}/api/connect/callback
Rename the file .env.local.example
to .env.local
. Open the file and set the environmental variables:
CLIENT_ID
: the client ID from the tool's settings page.CLIENT_SECRET
: the client secret from the tool's settings page.BASE_URL
: ThebaseUrl
from your secure tunnel.NEXT_PUBLIC_TOOL_ID
is the slug from the tool's settings page.
Start the application by running:
yarn dev # pnpm dev or npm run dev
Finally, install the application to your space:
- Navigate to the tool's settings page.
- Open the General Tab.
- Open the Install Link in a new browser tab.
- Select a space the Tool Plugin should be installed to.
- Open the selected space from Step 4.
- Navigate to a story of your choice.
- Open the tool tab by clicking
- Approve the necessary access for the tool.
The installation process is only done once per space. After the installation is finished, you will be able to navigate to the tool section inside any story and access the Tool Plugin.
When deploying your Tool Plugin, please remember to adjust the tool settings inside the Storyblok App to point to the correct Index to your page and Redirection endpoint.
For more detailed information on Storyblok extensions, read the following guides: