Strapi plugin logo for Multi Site Vercel Deploy

Multi Site Vercel Deploy

Strapi v4 plugin to trigger and monitor multiple site deployments on Vercel.

thumbnail for Multi Site Vercel Deploy

Multiple Site Vercel Deployments

npm version

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

Vercel Deploy Logo

Plugin Preview

Home Page:

Plugin Home Page

Settings Page:

Plugin Settings Page

Installation

Install dependency

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

1
2
3
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:

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

Run

You can now run Strapi:

1
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

  • 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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:

1
2
3
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.

Install now

npm install @code-mancers/strapi-plugin-multi-site-vercel-deploy

STATS

1 GitHub star6 weekly downloads

Last updated

305 days ago

Strapi Version

4.5.3 and above

Author

github profile image for Sujay Prabhu
Sujay Prabhu

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.