You tested and committed your latest changes, created a pull request on the master branch and then approved it. You are pretty sure it’s now deployed into production. Or is it?

You browse pages on the production URL, but nothing has really changed. How can you be absolutely sure the website contains your latest changes? Hopefully, your static web hosting provider gives you that information (Vercel does) but maybe you really, really want to be sure.

One technique is to include website deployment information (such as the last successful commit message) into a web page on your website, perhaps the About page or a hidden secret page that only you know about.

Vercel defines System Environment Variables that you can query (provided you expose them in your project) to find out various information relating to your current deployment, including VERCEL_GIT_COMMIT_SHA and VERCEL_GIT_COMMIT_MESSAGE. VERCEL_ENV tells you if you are currently on the production or staging site.

You can also query the Nodejs process object to find out which version of Node was used to build the site, and the underlying platform.

The only trick is, these environment variables and deployment information are only available during the build phase. It’s not available when a user browses the static content that has been deployed, so the trick is to get this information in GetStaticProps and pass them as props to your page component.

export const getStaticProps: GetStaticProps = async () => (
  props: {
    arch: process.arch,
    platform: process.platform,
    version: process.version,
    commit: process.env.VERCEL_GIT_COMMIT_MESSAGE
  }
)

Then, in your page, you can display the information any way you want, for example in a list (I used Javascript rather than Typescript in this example for simplicity).

const WebsiteInfo = ({ arch, platform, version, commit }) => (
  <ul>
    <li>{arch}</li>
    <li>{platform}</li>
    <li>{version}</li>
    <li>{commit}</li>
  </ul>
)

For a working example of this technique, please view the source for this site’s About page.