Giving Netlify access to a file hidden by .gitignore on Github

Question

I'm running into a bit of a dilemma with a repository in Github when I try to host the project on Netlify. The project includes a file named config.js and is referenced on both HTML pages. It includes some variables and a function to store my Google Maps API key, so I created a .gitignore file to hide it in my Github repository. The problem is, now that I've deployed it in Netlify, I'm not sure how to reference the config.js as an environment variable or something similar so that Netlify is able to find my Google Maps API key when it renders the site. Right now, the site renders, but it doesn't quite work because I'm running into errors since Netlify cannot see my config.js file.

You'll see my file structure below including the .gitignore command and my config.js that stores the Google Maps API key with the following variables and function calls:

let head = document.getElementsByTagName("head").item(0);
let script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute(
  "src",
  "<MY GOOGLE MAPS API KEY>"
);
head.appendChild(script);

My question is, how do I go about referencing the variables above that store my API key in an environment variable on Netlify? Or, is there a way to give only Netlify access to the config.js file without exposing it in Github?

There's some documentation on Netlify about deploy keys and submodules, but I don't understand that part of the docs and I'm not sure if they're even relevant to my problem.

Answer 1

You can add variables that you want to be included as part of your static site to Netlify's environment variables, as you've mentioned. That keeps them out of the Git repository.

The tricky part is getting those variables out of the Netlify build environment and into your source code. You have at least two different options, depending on how sensitive your variables are:

1. If you don't want your variables to be checked into Git but you are OK having them embedded into your public Javascript/HTML files (Google Maps API key might fall into this category), you can use a build tool like Webpack to inject environment variables into your source code. If you're using React or another framework, they usually have ways to include environment variables from the build environment. If you aren't, you may just need to write a custom build script or leverage a pre-built NPM package to inject a small <script>var myVar = "<myEnvironmentVariableValue>";</script> into your HTML page on build. Actually it looks like Netlify can inject some custom script into your page. Maybe you could try that.

2. If your variables are more sensitive and you don't want them publicly exposed, you need to add an actual server-side component. This could be as fancy as a serverless API or a standard humdrum web server. Then when your front-end needs this secret variable, it reaches out to the server and asks for it, presumably from within an authenticated portion of your website. That keeps the variables out of the public HTML/JS but still lets your site access them on demand.