Use .env in local plugin

System Information
  • Strapi Version: v3.2.5
  • Operating System: MacOS Catalina v10.15.6
  • Database: MongoDB
  • Node Version: v12.18.3
  • NPM Version: v6.14.8
  • Yarn Version: v1.22.4

I develop a Strapi local plugin but I’m unable to retrieve variable defined in my .env file at the root of my project. I try to load this value in my React component (plugins/myPluginName/admin/src/containers/HomePage/index.js).

I try with the global process module like that :

process.env.my_variable

But it returns undefined. Any ideas ?

My StackOverflow post :


Hello,

This is not how the frontend works. .env variables are not passed to the client-side.

To pass env variable to the administration panel you should customize webpack config,

1. create the file at the following route:

{strapi-project}/admin/admin.config.js:

module.exports = {
  webpack: (config, webpack) => {
    // Add your variable using the DefinePlugin
    config.plugins.push(
      new webpack.DefinePlugin({
        //All your custom ENVs that you want to use in frontend
        CUSTOM_VARIABLES: {
          my_variable1: JSON.stringify(process.env.my_variable1),
          my_variable2: JSON.stringify(process.env.my_variable2),
        },
      })
    );
    // Important: return the modified config
    return config;
  },
};

2. Add variables to .env

{strapi-project}/.env:

my_variable1=test_variable1
my_variable2=test_variable2

3. In React components, you can use them like this:

{CUSTOM_VARIABLES.my_variable1}

image

5 Likes

Oh thank you :pray: It works fine !! It’s not strange that env is not passed by default to the plugin ?

You can pass envs to plugin’s backend part, but you can’t pass them to frontend part(admin).

Indeed that’s strange (at least for me), but I think that’s a normal behavior, as usually you don’t need to pass variables from env to frontend.

Unless the environment information is passed during the build time, you will need to create a backend route that your plugin frontend can request, the default route created if you used the plugin generator is the / index route that you can add a response from the Strapi backend to.

My goal is to make HTTP request outside of strapi from my plugin front-end and to do it I need to add x-api-key which is stored in my .env.
Is there a better way @DMehaffy ?

Unfortunately not, I would imagine you don’t want that API leaked in the build and it would be better in your case I think to construct an API controller in the plugin backend to handle the request and forward the response to your plugin frontend.

If the key environment variable isn’t included during build time (of the admin and the plugin admin) the frontend won’t be able to access the variable. The only other method is to request it from the Strapi backend or have the backend make the request.

Our admin is React based and thus is CSR (Client Side rendered) meaning once it’s built Strapi is only acting as a static web server for the built files.

3 Likes

okok ! Thank you for you time @DMehaffy :pray:

I am trying to access CUSTOM_VARIABLES in /plugins/{plugin}/admin/src/containers/HomePage/index.js. It throws ReferenceError for CUSTOM_VARIABLES

Try rebuilding the admin panel. (Delete build and .cache folders if rebuilding doesn’t help)

1 Like

yeah, deleting build folder worked. Thank you for the help :grinning:

Wow. This was really helpfull. Thanks :pray:

How does this work in Strapi v4? Putting this inside src/admin/webpack.config.js does not seem to work unfortunately.

1 Like

Hey Pepijn, did you ever mange to get this working for Strapi v4?

How does this work in Strapi v4?

This worked for me with Strapi V4:

  • Rename ./src/admin/webpack.config.example.js to ./src/admin/webpack.config.js.
  • Add the webpack.EnvironmentPlugin, which reads from the current process.env and assigns then to frontend, my full file is below.
"use strict";

/* eslint-disable no-unused-vars */
module.exports = (config, webpack) => {
  // Note: we provide webpack above so you should not `require` it
  // Perform customizations to webpack config

  config.plugins.push(
    new webpack.EnvironmentPlugin(["NODE_ENV", "TEST_VAR"])
  );

  // Important: return the modified config
  return config;
};

From my react code, I can access the variables from the same path from my .env file.

console.log("process.env.NODE_ENV", process.env.NODE_ENV);
console.log("process.env.TEST_VAR", process.env.TEST_VAR);

As a note, I had to manually restart strapi develop --watch-admin each time to see the changes.

6 Likes

This post saves me a lot of work.
Thank you!

For those with the error TypeError: webpack.EnvironmentPlugin is not a constructor

Try webpack.default.EnvironmentPlugin instead