Best practice to store API keys?

Hello all, I have a question about managing API keys.

Currently I store my single Google Maps API key in a JS file as plain text.
In future, I am planning to have multiple keys, one per environment:

  • Dev-API-key for my local environment
  • Prod-API-key for my prod environment

I’d like to use my Dev-API-key when I develop on local. I’d like to inject my Prod-API-key into my site when I deploy to remote.

What’s the best way to manage unique per environment Google Maps API keys? Thanks

.env files are a generally accepted Good Way to accomplish this:


And on production with Trellis you can store the API keys like the secrets they are in the vault yml file.

1 Like

I just ran into this issue/need and was able to easily integrate dotenv into a Sage 9 theme using dotenv-webpack.


yarn add dotenv-webpack

Then in webpack.config.js add the following to the top:

const Dotenv = require('dotenv-webpack');

and add the plugin:

plugins: [
    new Dotenv(),

The .env file path defaults to the theme folder, but you can config it elsewhere if you need.

1 Like

Thanks all for bringing up .env to the conversation. I have found an existing .env file at /site level.
Is there better way to point at site/.env inside webpack.config.js file?

my webpack.config.js:

plugins: [
    new Dotenv({
      path: '../../../../.env',

I need to point from site/web/app/themes/my-theme to site/.env

@ethicka did you add two different keys to your .env files, on key to each environment?

This topic was automatically closed after 42 days. New replies are no longer allowed.