npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

strapi-plugin-vercel

v0.0.7

Published

Vercel platform plugin

Downloads

28

Readme


Usage

To install latest version use NPM.

npm install --save strapi-plugin-vercel

Versions

| State | Version | Strapi | | ------ | -------- | ------ | | dev | dev | 4.x | | stable | ^0.0.7 | 3.x |

Overview

If you want to use Vercel as a platform for your website built on Strapi, 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 have a recreation of the vercel dashboard on your strapi dashboard, with which you can easily trigger deploys.

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: {
            // Required
            token: env('VERCEL_TOKEN'),
            // Required
            projectId: env('VERCEL_PROJECT_ID'),
            // Optional (required if you use teams)
            teamId: env('VERCEL_TEAM_ID'),
            // Required (hooks)
            triggers: {
                production: env('VERCEL_TRIGGER_PRODUCTION')
            },
            // Optional
            config: {
                // Number of latest deployments
                deployments: 10
            }
        }
    });

    Token

    Token is required.

    Generate token on https://vercel.com/account/tokens. You should set the scope to your team.

    Team ID

    Team ID is optional, but if you set team's scope to your token, than you should provide team ID.

    You can find it on your team's settings page: https://vercel.com/teams/{team}/settings.

    It should begin with team_.... If you use personal account, you don't need it.

    Project ID

    Project ID is required.

    You can find it on your projects's settings page: hhttps://vercel.com/{team}/{project}/settings

    It should begin with prj_.... If you use personal account, you still need it.

    Trigger

    Trigger (deploy hook) is required.

    You can generate it on your projects's settings git page: hhttps://vercel.com/{team}/{project}/settings/git

    https://api.vercel.com/v1/integrations/deploy/abcdefghijklm/vwxyzvwxyzzz/
    |                                                 ^^             ^^
    |                                           / project id  / hook id     /

    Copy only hook id.

  3. Edit administration section. Create these directories if you don't have them yet.

    {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.