trangcongthanh / strapi-plugin-vercel

▲ Strapi plugin for Vercel Platform

Strapi Plugin Vercel

List deployments and deploy directly from Strapi.

🕹 f3l1x.io | 💻 f3l1x | 🐦 @xf3l1x

---

Usage

To install latest version use NPM.

npm install --save strapi-plugin-vercel

Overview

If you want to use Vercel as a platform for your website you need to tell Vercel when to rebuild your site. Of course, you can use webhook, but it can trigger a lot of pipelines. With this plugin, you will see last vercel's deploments and can easily trigger deploy with button.

This plugin solves:

• manual triggering deployment to Vercel
• list of latest deployments
• current status of deployment

Documentation

1. Install plugin.

2. Edit configuration.

   {strapi}/config/server.js

   There must be root key vercel.

   module.exports = ({ env }) => ({
       {....},
   
       vercel: {
           token: env('VERCEL_TOKEN'),
           teamId: env('VERCEL_TEAM_ID'),
           projectId: env('VERCEL_PROJECT_ID'),
           triggers: {
               production: env('VERCEL_TRIGGER_PRODUCTION')
           },
       }
   });

   Token

   Generate token on https://vercel.com/account/tokens.

   Team ID

   Get from API endpoint or inspect https://vercel.com/{team} page in devtools.

   Project ID

   Get from API endpoint or inspect https://vercel.com/{team}/{project} page in devtools.

   Trigger

   Generate webhook on https://vercel.com/{team}/{project}/settings/git and parse last string (webhook id).

   |--------------------------------------------/ project id  / webhook id /
   https://api.vercel.com/v1/integrations/deploy/abcdefghijklm/vwxyzvwxyzzz/
   

3. Edit administration.

   {strapi}/admin/src/containers/HomePage/index.js

   import React, { memo } from "react";
   import { Padded } from "@buffetjs/core";
   import { Header } from "@buffetjs/custom";
   import { Deployments, DeployButton } from "./../../../../plugins/strapi-plugin-vercel/admin/src/view";
   
   const Dashboard = () => {
       return (
           <>
           <Padded top right left size="md">
               <Header
               title={{ label: "Dashboard" }}
               actions={[
                   { Component: DeployButton },
               ]}
               />
           </Padded>
           <Padded right left size="md">
               <Deployments />
           </Padded>
           </>
       );
   };
   
   export default memo(Dashboard);

4. Profit 🚀

Development

---

Consider to support f3l1x. Also thank you for using this package.