I am using sentry.io for error tracking and want to tag all the errors to a release (the COMMIT_REF variable), how would I go about being able to access this COMMIT_REF variable with client-side JS, or is this even possible? I currently do not have any build commands, it is simply HTML and JS files.
From the research I have done, I would need to use a site builder but I do not have any idea on where to start with this.
Any help would be appreciated. Sorry for the trouble.
You would have to interpolate that at build time, which is the only time that Netlify both knows the commit ref, and can change your files. I understand you don’t have a build command now but you’d need to create one to “do something” with the environment variable, so check out this article about how environment variables at netlify work and how to use them:
I have the same issue; I want to expose the COMMIT_REF in my Vue app. How do I do that? I have a Vue CLI 3 app and I want to expose that env var in it.
Hi, @bswank. The COMMIT_REF environment variable only exists in the build system during the site build process at Netlify. If you are using our continuous deployment workflow, then the environment variable is present during the site build process.
Note, there is no application server interpreting code at browse time with a Netlify site. The environment variable only exists during the build.
If you want to include this environment variable in your deployed site’s javascript, then the environment variable will need to be “baked in” to the javascript during the site build process.
When I say “baked in”, I mean that the build process itself will need to copy this environment variable to a variable in the site javascript so it is available at browse time. This should be done programmatically by the build process itself.
Please let us know if there are other questions about this or if this answer is unclear in any way.
Hey @luke – this is somewhat helpful, though, I understand all of that. What I’m trying to figure out is, at build, time, how do I actually access the Netlify variable in my Vue application. I can set my own variables, but they have to be prepended with VUE_APP so I’m looking for some solution to essentially copy Netlify’s COMMIT_REF to a VUE_APP_COMMIT_REF var.
Oh man thank you, @luke. I tried this once before, but I ended up getting a value of “$COMMIT_REF” because that var is not present locally. I tested on Netlify and it works. I must have been trying a bunch of different things and when that value didn’t come through I moved on too soon.
@luke Is there any way I can expose the same in my functions as well? NODE_ENV is undefined, along with anything else that isn’t defined in the env/build settings portion of the dashboard…
Only environment variables defined via the web UI will be available in the functions (using a syntax like process.env.VARIABLE_NAME).
If you want other environment variable to be available for your function, you may need to manually copy them into the code for the function before it is deployed. By this I mean manually (via build script or other programmatic method) copy the variable into the code of the function itself.
That makes sense! I currently have not defined a build step for my functions. Whatever Netlify does automatically is working for me. Is there a way I can preserve Netlify’s build but also specify my own step?
Can you clarify what you mean by that question @bswank? The only building we do is your build command. The environment variables in functions are available because they are sent along with the function, they are not interpolated at build time.
I have a Vue CLI app with a src/api directory. In that directory I have functions (authUser.js for instance) as well as other directories and files, such as src/api/shared/helpers.js and I use code from helpers.js in my functions.
I also have a package.json file in my src/api directory which outlines all of the dependencies of my functions (seperate from my Vue app).
In netlify.toml I have a [build] context which specificies my functions directory: functions = "src/api".
When I push my code to Netlify, I don’t specify anything else with regard to my functions. There’s no specific build step or tool; nothing. In the logs I see that Netlify is using zip-it-and-ship-it to grab my dependencies, put it all together, and deploy my functions to AWS Lambda.
What I’m trying to figure out is where would I specify what should happen with regard to environment variables since Netlify is (thankfully) completely taking care of building my functions for me.
If I’m misunderstanding something here please forgive me. I’m very new to Netlify functions.
Also, for further context, I’m using Netlify Dev locally and do not use netlify-lambda.
You could use an explicit interpolation of variable’s definition during your site build, to change the function files on disk. Something like this may work, appended to your usual build command:
&& sed -i s/PLACEHOLDER/${COMMIT_REF}/g function.js to use the value that is present in the shell that your build is run in. It’s not elegant and you can probably find a better way, but the key is that since we aren’t interpolating for you, you can do so yourself via some mechanism.
