How to use a variable from `.env` in a web page

Can anyone share an example of how to store and then use a variable or setting like an API key from the project .env file in a web page?

I’m personally most interested Mapbox access token at the moment but I’m sure the pattern is applicable to many more things.

Thanks!

<head><style>body {margin: 0;  padding: 0;} #map {position: absolute;  top: 1.5em;  bottom: 0;  width: 100%;}</style></head>
<body>
<a href="/">Home</a>
<link href="https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js"></script>
  <div id="map"></div>
<script>
  var home = [60.672, -135.024];
  L.mapbox.accessToken ='>>>TOKEN FROM .env HERE<<<';  
  var map = L.mapbox.map('map','mapbox.light').setView(home, 15);
  </script>
</body>
1 Like

Sure, you want to use a template and pass that value from the server to the front-end. The slack passport auth example does this, using the client_id in the Sign in with Slack button. The important parts are setting up express to use handlebars, passing the env variable in the route, and the handlebars template itself.

Thanks. There is a lot of other stuff in there that confuses my beginners mind! I did manage to prune it down to a simplest example I can build from. For anyone one else in a similar situation, this might save you an hour or so:

:smile:

1 Like

Keep in mind that this can be a security issue. Don’t pass anything to the client that you don’t want the whole world to know.

1 Like

Hello. I’m having the same issue trying to use a .env variable to access a Mapbox access token. But @maphew solution is no longer visible. Can you please re-share? Thanks!

Others will surely respond but the key takeaway here was expressed in Tim’s reply. You don’t want to embed a security token of any kind in a page you send to the client’s browser. Anyone can read it and your secret token has been compromised.

Such things should remain on the server.

The question remains, how to do I avoid having the Mapbox token sent to the browser? I have created the environment variable per the Glitch instructions. Where I am having trouble is accessing it in my index.html. It seems that it must be passed through from my server.js code, but I have no idea how to do that and cannot find instructions anywhere. It seems like a very rudimentary problem to pass variables, but as a novice I do not know how to make it work. Any advice and/or working examples would be very helpful. Thank you.

Hi @MapExcite and welcome to the forum :blush:

It depends what you’re doing with MapBox. Just looking at their security page here: How to use Mapbox securely | Help | Mapbox, they say:

  • Make all requests requiring a token with secret scopes on a server. Secret token API requests should never be exposed to the client.

So if you’re just doing “public-y” kind of operations, maybe it’s ok to send your token to the frontend, otherwise, perhaps your Node.js layer should make the API calls to mapbox, keeping all your access credentials private.

Either way you need a little bit of Node.js, either to pass the token to the frontend (probably as JSON) or – much better – to make the call to Mapbox privately and relay the result back to the frontend. Can you share the project name you’re working on so we can take a look at the Glitch?

Hello @SteGriff. Thanks for replying. I do want to keep access credentials private, so do need that node.js piece, which I don’t have and having trouble figuring out how to create that to do as you suggest - communicate privately with mapbox with the API token stored in .env.

My project name is clct-england-route-3d. I’m coming from a background making static maps and this is my first foray into trying to do something interactive. My JS, html, and CSS are all extremely rudimentary, so don’t assume any knowledge on my part.

I tried at one point to create a server.js file with the following code (whereby mapbox_token, stored in .env, contains the API token that mapbox needs), but that didn’t seem to work.

import mapboxgl from “mapbox-gl”
import “mapbox-gl/dist/mapbox-gl.css”
mapboxgl.accessToken=process.env.mapbox_token

Hello Again. I have made a little progress by using the Glitch hello-express model. I have been able to pass the Mapbox Token from the .env file to the client side by sticking it in the “dreams” array that Glitch offers as an example, which will have just that single element (the Mapbox Token) in the array. On the client side in my index.html it seems to read the array, but only in the html, and not in the javascript. I don’t know how to have that “dreams” array read in the java script. My project is: aluminum-wandering-button, and the problem can be seen in the index.html file, where I have commented the problem in capitals.

If anyone can offer specific lines of code to write to make this work, I would very much appreciate it. Java script and html are very new to me, so a code solution that I can plug in would be most helpful. Thank you!