Deploy Add-on on Vercel

Here you learn how to build, deploy, and run your SCAYLE Add-on application on Vercel, based on the SCAYLE Demo Add-on code as a source.

Prerequisites

To start deploying on Vercel you need to

have a Vercel account ( → Vercel Signup)
have node and yarn installed

Make a copy of the SCAYLE Demo Add-on

Download the demo-add-on-vite code to your local machine, unzip the file and rename the project folder according to your needs.

In your IDE open the .env.example set PANEL_ADDON_IDENTIFIER to your desired Add-on name.

Note: The name should be lower-case, alphanumeric and using - or _ only. At the end, it should look something like this: PANEL_ADDON_IDENTIFIER=my-add-on

Installing the Vercel CLI

You can install the Vercel CLI on your local machine using this command:

yarn global add vercel

To learn more about the Vercel CLI, head over to the Vercel Docs.

Open the terminal and navigate to the copy you made from the SCAYLE Demo Add-on.

vercel login

Create a Vercel Project

In your terminal, still located inside the new project folder

vercel link

This will guide you through the full setup process. The Vercel CLI will also detect that this is a VueJS / Vite project and automatically set project settings.

Deploying the Application

To build & deploy the application, use these commands

vercel pull
vercel build
vercel deploy --prod

The output from this command returns the Application Production URL. Copy the Production URL for later.

Under some circumstances, the provided Production URL could be protected by Vercel and would required authentication, to visit the application.

To test this, try opening the Production URL in a private browser tab.

If indeed the Production URL requires authentication, Vercel also provides addition Production URL aliases, which are not protected.

Get Production URL aliases:

vercel inspect <PASTE-PRODUCTION-URL-HERE>

Add your Add-on to the SCAYLE Panel

Open the SCAYLE Panel and go to Add-ons.

Click the + NEW Button, in the top-right corner

Fill in the Identifier (the value you defined earlier in the .env.example as PANEL_ADDON_IDENTIFIER)

The Version can be 0.0.1

The Title and Description should be the name of your Add-On.

Under Appearance, choose a color.

Under Apps, define the App URL: This is the Production URL we copied earlier. At the end of the Production URL add /manifest.js

Just a few more steps:

Save your Add-on
Find your Add-on in the inactive Tab
Activate your Add-on
Open your Add-on
Here you are! :)