// pages/api/has-new-deploy.ts

import { APIRoute } from 'next-deploy-notifications';

export default APIRoute.configure({
  version: () =>
    process.env.NEXT_BUILD_ID || process.env.VERCEL_GIT_COMMIT_SHA || '',
});

This will cause the endpoint fail.

If I change the import to `import { APIRoute } from 'next-deploy-notifications/api'

A type error occurs

Cannot find module 'next-deploy-notifications/api' or its corresponding type declarations.

How do I fix it?

This PR adds support for Render.com.

When deployed to a Render environment, this package will now identify the current version by looking for RENDER and RENDER_GIT_COMMIT environment variables. All Render environments expose the RENDER variable as true and the RENDER_GIT_COMMIT will be the latest git commit hash for the given deploy.

Let me know if I can do anything else to help out. I've never developed/contributed to a TS library before so I may have missed something important.

Cheers

Hey there,

This is a great library, thanks a lot for putting this together.

Is it possible to add support for Render.com?

The two environment variables that would make this supported out of the box (like vercel) are RENDER_GIT_COMMIT and RENDER

See the docs.

My first impressions would be to create:

let isRender: IsEnvironment = () => !!process.env.RENDER;
let getRenderVersion: GetVersion = () => `${process.env.RENDER_GIT_COMMIT}`;

and then reference them in the handler like so:

let makeRouteHandler = (options: Options = {}): Handler => {
  let route: NextRouteHandler = async (req, res) => {
    let findVersion = options.version
      ? options.version()
      : isVercel()
      ? getVercelVersion()
      : isRender() # untested
      ? getRenderVersion() # untested
      : isGit()
      ? getGitVersion()
      : getUnknownVersion();
    let version = await Promise.resolve(findVersion);
    res.status(200).json({ version });
  };

I am happy to open a PR for this if it's a viable option.

Cheers

Hi,

How can I trigger a new deploy notification when there is a content update? I am using graphCMS for content management. The site is a static site. For content changes, the Vercel will trigger a rebuild. But rebuild will have the same commit hash.

https://vercel.com/docs/concepts/projects/environment-variables

I can use the BUILD_ID as a part of the site version.

This is what I did

I have added this to package.json "postbuild": "next-sitemap; echo NEXT_BUILD_ID=$(cat .next/BUILD_ID) > .env.production; cat .env.production"

// pages/api/has-new-deploy.js
import { APIRoute } from 'next-deploy-notifications/api';

export default APIRoute.configure({
  version: () =>
    process.env.NEXT_BUILD_ID || process.env.VERCEL_GIT_COMMIT_SHA || '',
});

Thanks for creating this really helpful package 👏🏻👏🏻👏🏻

I have a little annoyance with it as it keeps erroring with status code 500 when I'm working and hasn't done a commit yet.

As soon as I do my first git commit, the 500 errors disappears. Any way to work around this?

My endpoint looks like this:

export { APIRoute as default } from 'next-deploy-notifications/api';

Every time the interval is executed or the window gets focused or blurred the entire app re-renders. I fixed the hook but don't have any time to create a PR. If you find any issues in my code, please leave a comment. With my code you can also remove 2 dependencies.

Feel free to use it:

import {
  useCallback,
  useEffect,
  useRef,
  useState,
} from 'react';

const getCurrentVersion = async (endpoint: string) => {
  const response = await fetch(endpoint);
  if (response.status > 400) {
    console.error(
      '[next-deploy-notifications] Could not find current app version. Did you setup the API route?',
    );
    return { version: 'unknown' };
  }
  const json = await response.json();
  return json;
};

type HookOptions = {
  interval?: number;
  endpoint?: string;
  debug?: boolean;
};

type HookValues = {
  hasNewDeploy: boolean;
  version: string;
};

type UseHasNewDeploy = (options?: HookOptions) => HookValues;

const useHasNewDeploy: UseHasNewDeploy = (options = {}) => {
  const debug = useCallback((message: string) => {
    if (options.debug) {
      console.log(...['[Deploy notifications] ', message]);
    }
  }, [options.debug]);

  const [hasNewDeploy, setHasNewDeploy] = useState<boolean>(false);
  const [currentVersion, setCurrentVersion] = useState<string>('unknown');
  const lastFetchedRef = useRef<number>();
  const intervalInstanceRef = useRef<NodeJS.Timer>();
  const windowFocused = useRef<boolean>(true);

  const interval = options.interval ?? 30_000;
  const loopInterval = interval < 3_000 ? interval : 3_000;
  const endpoint = options.endpoint ?? '/api/has-new-deploy';
  const isUnknown = currentVersion === 'unknown';

  const startInterval = useCallback(
    () => setInterval(async () => {
      debug('Looping...');

      const enoughTimeHasPassed =
      !lastFetchedRef.current || Date.now() >= lastFetchedRef.current + interval;

      if (enoughTimeHasPassed && !isUnknown) {
        debug('Fetching version');
        const { version } = await getCurrentVersion(endpoint);
        debug(`Version ${version}`);

        if (currentVersion !== version) {
          debug('Found new deploy');
          setHasNewDeploy(true);
          setCurrentVersion(version);
        }

        lastFetchedRef.current = Date.now();
      }
    }, loopInterval),
    [currentVersion, debug, endpoint, interval, isUnknown, loopInterval],
  );

  useEffect(() => {
    if (!hasNewDeploy) return;
    clearInterval(intervalInstanceRef.current);
  }, [hasNewDeploy]);

  useEffect(() => {
    if (!hasNewDeploy && windowFocused.current) {
      clearInterval(intervalInstanceRef.current);
      intervalInstanceRef.current = startInterval();
    }
    const onFocus = () => {
      debug('focus');
      windowFocused.current = true;
      clearInterval(intervalInstanceRef.current);
      intervalInstanceRef.current = startInterval();
    };
    const onBlur = () => {
      debug('blur');
      windowFocused.current = false;
      clearInterval(intervalInstanceRef.current);
    };
    debug('addEventListeners');
    window.addEventListener('focus', onFocus);
    window.addEventListener('blur', onBlur);

    return () => {
      debug('removeEventListeners');
      window.removeEventListener('focus', onFocus);
      window.removeEventListener('blur', onBlur);
    };
  }, []);

  useEffect(() => {
    const fetchInitialVersion = async () => {
      debug('Fetching initial version');
      const { version } = await getCurrentVersion(endpoint);
      if (version === 'unknown') {
        console.warn(
          '[next-deploy-notifications] Could not find current app version.',
        );
      } else {
        debug(`Version ${version}`);
        setCurrentVersion(version);
        lastFetchedRef.current = Date.now();
      }
    };

    fetchInitialVersion();
  }, [endpoint, debug]);

  return {
    hasNewDeploy,
    version: currentVersion,
  };
};

export { useHasNewDeploy };