How to add analytics scripts only in production?

[khanetor]

There are already example how to add scripts, such as Google Analytics or Umami, to the head section. However, when I develop, it also track my views and interactions. How can I only load the analytics script only in production build, and not in development or test? There is no NODE_ENV that I can use

[brc-dd]

There is no NODE_ENV that I can use

Have you tried it? It's there.

import { defineConfig } from 'vitepress'

const inProd = process.env.NODE_ENV === 'production'

export default defineConfig({
  head: [
    inProd && ['script', { src: '...' }],
    [...]
  ].filter(Boolean)
})

[khanetor]

Oh I have not thought of that. I will try it soon.

[khanetor]

I tried this, but the typescript typechecking is not very happy, even with the filter.

[khanetor]

I finally settled on this approach

// .vitepress/config.mts

const umamiScript: HeadConfig = ["script", {
  defer: "true",
  src: "https://.../script.js",
  "data-website-id": "..."
}]

const baseHeaders: HeadConfig[] = []

const headers = process.env.NODE_ENV === "production" ?
  [...baseHeaders, umamiScript] :
  baseHeaders

export default defineConfig({
  ...,
  head: headers
})

And then set this to the head in config.

[khanetor]

@brc-dd thank you for the suggestion :)

[brc-dd]

filter doesn't work well with ts unless you add type predicates:

import { type HeadConfig, defineConfig } from 'vitepress'

const inProd = process.env.NODE_ENV === 'production'

export default defineConfig({
  head: (
    [
      inProd && ['script', { src: '...' }],
      ['link', { rel: 'icon', href: '/favicon.ico' }]
    ] satisfies (HeadConfig | false)[] as (HeadConfig | false)[]
  ).filter((x): x is HeadConfig => x !== false)
})

// but yeah it's clearer to just use an `if` block

const inProd = process.env.NODE_ENV === 'production'

const head: HeadConfig[] = [
  ['link', { rel: 'icon', href: '/favicon.ico' }]
]

if (inProd) {
  head.push(['script', { src: '...' }])
}

export default defineConfig({
  head
})