Search code examples
vue.jsbuildtimestampyarnpkgpackage.json

Inject build timestamp into vue-cli build output files to verify deployments with yarn

It is needed verify whether the latest build was deployed. I would like add timestamp on build log and in each file of the build output. I am using a Vue framework and yarn.

Solution

  • I needed to have a build timestamp in the output Vue app, not the logs.

    (You could write to build logs by adding a console.log(new Date().toIsoString()) in the webpack part of vue.config.js.)

    One way to get the build timestamp into to the app itself is to make use of the fact that webpack uses a simple template language in the HTML itself.

    In the Vue app index.html (for example), I inserted a data attribute on the root <html> element:

    <html data-build-timestamp-utc="<%= new Date().toISOString() %>">
  ...
</html>

    That's easily retrieved:

    document.documentElement.dataset.buildTimestampUtc

    You can then add that as a getter on the root App component, @Provide it to other components as "buildtime", etc.

    This works on a main build as well as a development "serve" build - but remember the root HTML itself doesn't hot-module-reload, so although the build timestamp is being updated, you'll have to refresh the page to see it.