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

1 Like

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.

1 Like

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