Getting a build numer/version available in process.env automatically?

Is there anyway to get a build number into your process.env variable so it can be used in things like sentry error logging etc?

I could of course manually add an environment variable but it’s kind of a pain to increment that manually every release

Sure is! Check out the provided environment variables here:

You can see the $BUILD_ID which may work for you? Also available is $DEPLOY_ID which will match the last part of the URL for the webpage with the build logs. Finally, you also have $COMMIT_REF which may be even more useful, since it’s your id rather than ours :slight_smile:

amazing thank you! Exactly what I needed.

I have a create-react-app deploying via netlify, so to access these its just process.env.COMMIT_REF ? Nothing in particular I have to do?

well, that will work only if you execute it during build, it in javascript, but yes, that is a pattern that can work in that context.

You may need this advice as well if you are trying to access those variables at BROWSE time, which won’t work using that process:

Got it.

So I want to tweak my build script a little to look like this

npm run build && echo $CONTEXT > public/netlify-context.txt

Then include a netlify-context.txt in my public folder?

What does my netlify-context.txt file look like in order to allow me to reference

process.env.COMMIT_REF

in my JS code as a user is on tehre?

For context, I’m trying to pass in the COMMIT_REF to sentry.io to log errors along with whatever version they are from… I need to have it available when I initialize the sentry package (which of course initializes anytime somebody downloads the website to their browser)

npm run build && echo $CONTEXT > public/netlify-context.txt

You can do this successfully, yes!

However, I think since you’re using react and this is not sensitive data, a better/easier pattern would be this:

export REACT_APP_NETLIFY_CONTEXT=$CONTEXT && npm run build

This will “bake in” the $REACT_APP_NETLIFY_CONTEXT so you CAN use it at browse time directly with process.env.REACT_APP_NETLIFY_CONTEXT in your javascript! (saves you a call to fetch the file contents that your pages would all potentially have to make - even though it’s a small file, it takes non-zero time to request and retrieve).

More details on that pattern (will ONLY work for react apps) here: https://create-react-app.dev/docs/adding-custom-environment-variables/#referencing-environment-variables-in-the-html