Develop Reference

How to read/pass vercel system enviroment variables to code in Sanity?

I want to pass the VERCEL_GIT_COMMIT_REF variable to my javascript bundle. I've deployed Sanity in Vercel and it only passes variables with the prefix SANITY_STUDIO_.
So, I've created an environment variable named SANITY_STUDIO_VERCEL_GIT_COMMIT_REF and want to pass VERCEL_GIT_COMMIT_REF into it.
I tried a few ways but it doesn't seem to work!
Here is what I want to achieve:

You can map environment variables by creating a .env.production file.
SANITY_STUDIO_VERCEL_GIT_COMMIT_REF=${VERCEL_GIT_COMMIT}
https://www.sanity.io/docs/studio-environment-variables#f5e9e3158896

Understanding .env file and environment variables in React JS

I'm relatively new to web development world and now I'm trying to understand the usage of .env file in React JS. So, I have read multiple articles and watch some explanation videos. However, most of them were focusing on how to use it rather what it actually is. Do I understand correctly that the main benefits of using environment variables are:
1)They make it easier to maintain applications since they all stored in one file .env
2)They are not visible to users and are not shown and uploaded to Git repository
Is it correct and is there anything else I need to consider?

They are useful to store site-wide values and settings that don't belong in state or as declarations (deep) in the source.
Important to know is that, for react to use them, they have to start with REACT_APP_. This is due to the environment is a nodejs one, and nodejs will claim all variables unless they start with REACT_APP_
Environment variables starting with REACT_APP_ are embedded in the app code during build time.
Do not store any secrets (such as private keys) as REACT_APP_ variables in there! That will expose them in the JS build.
In your react app you can access the variables like so:
let value = {process.env.REACT_APP_MYVALUE}
In HTML you can use the variables as such:
<title>%REACT_APP_SITE_NAME%</title>
A good quick read on usage with create-react-app: https://create-react-app.dev/docs/adding-custom-environment-variables

Usage
Environment (.env) variables are used to store sensitive information, or as the name says, environment-focused information (live, development, debugging, etc...)
.env file is also kept inside .gitignore, so it does not get pushed to any repositories.
Keeping track of variables
.env.example is a file which is not kept in .gitignore, but it is needed for other developers to know how and what to put in their .env. It looks something like this:
.env.example:
REACT_APP_STRIPE_KEY=
MY_SECRET_KEY=
THIS=
FOO=
BAR=
Basically an empty example of what would be .env. This then gets copied and filled with real values in a .env file, which is only available for that developer on that computer, and is read locally by the scripts which then know in what mode to start the app, connected to what database, with what password etc.

Create a file in the root folder.Its .env file
REACT_APP_(VARIABLE_NAME)=KEY_HERE
Usage:
when you added a variable in .env file. Restart your app.
console.log( process.env.REACT_APP_(VARIABLE_NAME) )
And your .gitignore file, add the bellow code
.env

Hiding API keys in JS setup

I'm creating a simple UI with an HTML+CSS+JS setup that uses a third-party API requiring a key and I'd like to keep the key in a file that I can gitignore and access from my Javascript file. I'm not going to be deploying this project, I just want to be able to push it to GitHub without temporarily deleting the variable before every commit.
All responses I've found are related to setups with Node.js, React/Webpack, or other server setups, but I don't have a server or transpiler and don't want to add a bunch of cruft and configurations just for this. Is there a way to do that? I tried storing it in a separate JS file and import/export, but either I couldn't get the syntax right or what I was trying needed a transpiler. Every attempt variation resulted in a syntax error or undefined variable.
Key information:
This is project run entirely locally--as in, just opening index.html in my browser--so I don't think I need to worry about the key being exposed in the client.
My setup pretty much just includes index.html, main.js, and style.css.
I want to push the project to GitHub, so I want to store the api key as a variable in a file separate from main.js that I can add to .gitignore but access in main.js.
I'm keeping this as simple as possible without frameworks, etc. Unless it's super simple and lightweight, I don't want to add libraries just to get this working.

Your best bet is to pull whatever secrets you need from the environment itself, either your environment variables or a secrets store.
The specific implementation will depend on what serverless provider you're using, but for example AWS Lambda lets you configure env vars:
https://docs.aws.amazon.com/lambda/latest/dg/env_variables.html
and you can use the Key Management Service or Parameter Store depending on your preference and requirements:
https://aws.amazon.com/blogs/mt/the-right-way-to-store-secrets-using-parameter-store/
Leaving the above in place in case folks find this via looking at the Serverless tag. Updates below based on the updated question.
So, if I understand the updated question correctly, you want to check in all your code to git except the API key, serve the files only on your local file system and have that local copy be able to access the API key.
The simplest way to do this would be to just have another .js file that defines the variable(s) in question like so:
// config.js
var config = { // this should be const instead if you're using ES6 standards
apiKey : '123456789XYZ'
}
Then, in index.html have another script tag that calls that before any scripts that need the config, e.g.:
<script src='./config.js'></script>
<script src='./main.js'></script>
</body>
In main.js you will then be able to reference the variable config for use, and similarly you can .gitignore 'config.js'.

If you use MVC, try to write in php variabel. Than open in script javasript with echo ...

Alternative to require our app module each time to debug in console

When I want to debug my requirejs app, I need to reference my application everytime with something like:
var App = require('app');
as stated here:
http://requirejs.org/docs/api.html#modulenotes
From that moment I can access everything via console because the App variable points to my application instance.. However, it is very annoying to have to do it after every page refresh. Is there any alternative that would help improve the development workflow?

You could deliberately export a reference to your application into the global space. This is actually what I do. I select a name that has very little likelihood of clashing. In your app module you could do this after your App object is created: window._myproject_app = App. This is then accessible as the global _myproject_app. You can start writing the first characters and use autocomplete rather than type the whole thing when you want to access it.
If you want the export to occur only in testing you can use RequireJS' config facility to pass configuration that tells the module responsible to export the instance whether it should export it or not.

Javascript global declaration

I've just started out with javascript and came across this line in a file called global.js There is only one line in the file. I'm not sure what does App do. Any ideas?
Filename: globals.js
//The Application
App = {};

it creates an object with a name of App... that's all it does.

I would assume that the idea behind the global.js file in your case is to include the file in your base html/template so that the variables in there can be accessed from anywhere in the app.
In some of our projects, we've had global files like this containing references to collections and "setting" variables, which is quite handy :)

It is creating an object named App in the global namespace. App has no functions or attributes (yet).

It (implicitly) declares a variable called App in a "global" context and assigns an empty object as its value. Assuming this is used on a web page somewhere, it's the same as declaring window.App = {}.
How this affects the rest of your application, we won't know until you post more relevant code.

This script just instantiate this empty Object. Probably, others scripts that ran along with this uses that object and depends that it is created there.