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.
Inject build timestamp into vue-cli build output files to verify deployments with yarn
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.
Maybe you want to use the define option.
let commonConfig =
{
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url))
},
},
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'auth_redirect.html')
}
}
}
}
export default defineConfig(({ command, mode, ssrBuild }) => {
if (command === 'serve')
{
//
return commonConfig;
}
else
{
commonConfig.define = {
"BUILD_TIMESTAMP": new Date().toISOString()
};
// command === 'build'
return commonConfig;
}
})
And then you can just assign BUILD_TIMESTAMP to any javascript variable in your appCode.
const buildNum = "BUILD_TIMESTAMP";//You will get right val in this.
define has to be compatible with https://esbuild.github.io/api/#non-analyzable-imports so gives issues in serve mode. So I have used it conditionally in build mode only. In Dev Mode you will see just raw value of buildNum variable.
To explicit Andrew E answer on how to access the build date in the app:
Add
data-build-timestamp-utc="<%= new Date().toISOString() %>"into<html>element in index.html:To access it from within the app (Vue):
<template>
<div>
<p>{{ buildTimestampUTC }}</p>
</div>
</template>
<script>
export default {
data() {
return {
buildTimestampUTC: null,
};
},
mounted() {
const htmlElement = document.documentElement;
this.buildTimestampUTC = htmlElement.getAttribute('data-build-timestamp-utc');
},
};
</script>
© 2022 - 2024 — McMap. All rights reserved.