Multiple Site Vercel Deployments

Strapi v4 plugin to trigger and monitor multiple sites deployment on Vercel.

Plugin Preview

Home Page:

Settings Page:

Installation

Install dependency

Run the following command in your Strapi project to install vercel-deploy:

yarn add @code-mancers/strapi-plugin-multi-site-vercel-deploy
# or
npm i -S @code-mancers/strapi-plugin-multi-site-vercel-deploy

Enable plugin configuration

Open config/plugins.js file and add the vercel-deploy entry:

module.exports = ({ env }) => ({
  "multi-site-vercel-deploy": {
    enabled: true,
  },
});

Run

You can now run Strapi:

yarn develop

You should see the Vercel Deploy menu in the left panel.

N.B. You may need to run yarn build in order to see the new menu entries.

Then you can proceed with the plugin configuration.

Plugin Configuration

Config properties

Example:

module.exports = ({ env }) => ({
  "multi-site-vercel-deploy": {
    enabled: true,
    config: {
      sites: [
        {
          deployHook:
            "https://api.vercel.com/v1/integrations/deploy/prj_<deploy-hook>",
          apiToken: "<vercel-api-token>",
          appFilter: "your-app-name-on-vercel",
          teamFilter: "your-team-id-on-vercel",
          displayName: "app-name-to-be-displayed-in-dropdown",
        },
      ],
    },
  },
});

The plugin is reading the following configuration variables to work:

• deployHook: Url of the git deploy hook exposed in Vercel.

  • You can follow this guide to create a deploy hook on Vercel

• apiToken: API token of your Vercel account used to fetch the list of deployments

  • Access tokens can be created and managed inside your account settings

• appFilter: Name of your Vercel App used to filter the list of deployments

  • Set the name of your Vercel App to see only the deployments you need

• teamFilter: Id of your Vercel Team used to filter the list of deployments

  • Set the id of your Vercel Team to see only the deployments you need

Environment Configuration

You shouldn't disclose the api token and the deploy hook url for security reasons. Therefore, you shouldn't add these values to versioning in a public git repository. A suggested solution is to use environment variables. Example:

module.exports = ({ env }) => ({
  "multi-site-vercel-deploy": {
    enabled: true,
    config: {
      sites: [
        {
          deployHook: process.env.VERCEL_DEPLOY_PLUGIN_HOOK,
          apiToken: process.env.VERCEL_DEPLOY_PLUGIN_API_TOKEN,
          appFilter: process.env.VERCEL_DEPLOY_PLUGIN_APP_FILTER,
          teamFilter: process.env.VERCEL_DEPLOY_PLUGIN_TEAM_FILTER,
          displayName: process.env.VERCEL_DEPLOY_PLUGIN_DISPLAY_NAME,
        },
      ],
    },
  },
});

Local development

For local development, you can add the config properties in your .env file:

VERCEL_DEPLOY_PLUGIN_HOOK="https://api.vercel.com/v1/integrations/deploy/prj_<deploy-hook>"
VERCEL_DEPLOY_PLUGIN_API_TOKEN="<vercel-api-token>"
VERCEL_DEPLOY_PLUGIN_APP_FILTER="your-app-name-on-vercel"

Credits

Thanks to gianlucaparadise for making strapi-plugin-vercel-deploy which this was based on.