export interface WebhookRequest {
id: string;
hosting: string;
event: WebhookEvent;
payload: Json;
}

export interface PublishWebhookPayload {
  projectId: string;
  version: number;
  dir: string;
  pages: WebhookPage[];
  workspace?: IWorkspace;
  team?: FSTeam;
  css: ExternalFile[];
  js: ExternalFile[];
  other: ExternalFile[];
  pluginsData?: any;
}

interface PingPayload {
 message: string;
 html: string;
 css: ExternalFile[];
 js: ExternalFile[];
}

interface PublishPayload {
 projectId: string;
  version: number;
  dir: string;
  pages: WebhookPage[];
  workspace?: IWorkspace;
  team?: FSTeam;
  css: ExternalFile[];
  js: ExternalFile[];
  other: ExternalFile[];
  pluginsData?: any;
}

interface WebhookPage {
 html: string;
 key: string;
 title: string;
 path: string;
 cover?: string;
 image?: { thumb: string; location: string };
 index?: boolean;
 settings?: any;
}

interface ExternalFile {
 url: string;
 contentType?: string;
 cacheControl?: string;
}

/**
 * Vev Examples - Webhook Server
 *
 * A NodeJS + Express example server for receiving
 * PUBLISH events from Vev securely.
 *
 * [Read more here](https://help.vev.design/hosting/custom/webhook)
 */
const express = require("express");
const fs = require("fs");
const crypto = require("crypto");
const bodyParser = require("body-parser");
const path = require("path");

// This should not be stored in plain text

const VEV_SECRET = "...";
const VEV_IP = "34.72.55.20";

const app = express();
// Add this to get IP information (no required, just an additional layer of security)
app.set("trust proxy", true);

// Since the large full websites can be sent over the web
const LargeJSONBodyParser = bodyParser.json({
  limit: "150mb"
});
app.use(express.static(path.join(__dirname, "..", "public")));

// Creating a post route to handle the the webhook call
// Adding json body parser midleware
// Also Adding vev signature validator (you find the implementation at the bottom)
app.post(
  "/webhook-receiver",
  LargeJSONBodyParser,
  VevSignatureMiddleware,
  async (req, res) => {
    const { payload, event } = req.body;
    console.log("event: ", event);
    console.log("payload: ", payload);
    if (event === "PUBLISH") {
      await Promise.all(payload.pages.map(StoreVevPage));
    } else if (event === "PING") {
      console.log("Webhook test ping recieved from: " + req.ip);
    }

    res.send({ message: "I received your webhook!!" });
  }
);

async function StoreVevPage(page) {
  // Putting the files in the public dir
  // if page is index page then set the path to be public/index.html
  let pagePath = path.join("./public", page.index ? "index.html" : page.path);
  // Page path can have file extntion
  if (!path.extname(pagePath)) pagePath = path.join(pagePath, "index.html");

  // Creating the dir to put the file in
  // Remeber that in vev the page path can be nested (example dir1/dir2/index.html)
  // So important to create dir recursive
  const dir = path.dirname(pagePath);
  try {
    fs.promises.access(dir);
  } catch (e) {
    await fs.promises.mkdir(dir, { recursive: true });
  }

  //Writing the file to the page path
  await fs.promises.writeFile(pagePath, page.html);
}

function VevSignatureMiddleware(req, res, next) {
  const signatureHeader = req.get("X-Vev-Signature");
  if (!signatureHeader) return next("Missing signature");

  // For extra secuirty you can validate that the IP is the vev IP address
  if (req.ips.indexOf(VEV_IP) === -1)
    return next("Invlid IP request (not from vev)");

  const [algorithm, signature] = signatureHeader.split("=");
  if (!algorithm || !signature) return next("Invalid signature");

  // Validating signature of request
  // Done by comparing the signature with HMAC (hash-based message authentication code)) using the secret key for hasing
  const hmac = crypto.createHmac(algorithm, VEV_SECRET);
  const generatedSignature = hmac
    .update(JSON.stringify(req.body))
    .digest("hex");

  // Comparing the request signature with the generated
  // This will validate that the sender knows the secret
  // and that the content was not tampered with and that the
  if (generatedSignature !== signature) {
    console.error("Webhook trigered with invalid signature");
    return next("Invliad signature");
  }

  next();
}

app.listen(8001, () => console.log(`Example app listening on port 8001!`));

<?php

/**
 * Vev Examples - Webhook endpoint
 *
 * PHP example script for receiving PUBLISH events from Vev securely.
 *
 * [Read more here](https://help.vev.design/hosting/custom/webhook)
 */

const VEV_SECRET = '85806154-43ae-4427-8f27-479af8239b2e';

if (!isset($_SERVER['X-Vev-Signature'])) return 'Missing signature';

$signatureHeader = $_SERVER['X-Vev-Signature'];

if (!$signatureHeader) return 'Missing signature';

list($algorithm, $signature) = explode('=', $signatureHeader);

if (!$algorithm || !$signature) return 'Invalid signature';

if (!in_array($algorithm, hash_hmac_algos())) return 'Invalid algorithm';

$requestBody = json_decode(file_get_contents('php://input'));

// Validating signature of request
// Done by comparing the signature with HMAC (hash-based message authentication code)) using the secret key for hasing
$generatedSignature = hash_hmac($algorithm, json_encode($requestBody), VEV_SECRET);

// Comparing the request signature with the generated
// This will validate that the sender knows the secret and that the content was not tampered with
if ($generatedSignature !== $signature) return 'Invalid signature';

$ip = $_SERVER['REMOTE_ADDR'];

if (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
if (!empty($_SERVER['HTTP_CLIENT_IP'])) $ip = $_SERVER['HTTP_CLIENT_IP'];

function storeVevPage ($page) {

    // Putting the files in the public dir
    // if page is index page then set the path to be public/index.html
    $pagePath = './public/' . ($page['index'] ? 'index.html' : $page['path']);

    if (!str_contains($pagePath, '.')) $pagePath .= '/index.html';

    $directory = substr($pagePath, 0, strrpos($pagePath, '/') - 1);

    if (!file_exists($directory)) mkdir($directory, 0777, true);

    // Writing the file to the page path
    file_put_contents($pagePath, $page['html']);

}

$payload = $requestBody['payload'];
$event = $requestBody['event'];

echo $payload;
echo $event;

switch ($event) {

    case 'PUBLISH':

        foreach ($payload['pages'] as $page) {

            storeVevPage($page);

        }

    break;

    case 'PING':

        echo "Webhook test ping received from {$ip}";

    break;

}

echo 'I received your webhook';