Not able to access dotenv variables in the Strapi Admin front-end for different env's #5599

Discussions
2

Responses to the discussion on Github

alexandrebodin271d ago

Maintainer

Hi That’s not how the client side works :slight_smile: The env variables are created at build time in the js bundle not at runtime.

vinod77271d ago

Author

@alexandrebodin Thanks for your response.
I know env variables are created at build time. But i should be able to access dotenv variables at build time as well.

At Build Time i want to get:
On DEV: process.env.NODE_ENV: dev
On UAT: process.env.NODE_ENV: uat
On PROD: process.env.NODE_ENV: production

But currently on all the environments i am getting process.env.NODE_ENV as production. I want to get it as said above at build time.

alexandrebodin271d ago

Maintainer

This is not something we will be able to do. THe NODE_ENV=production is required to build the admin panel correctly. It doesn’t recognize other env variables.

vinod77270d ago

Author

@alexandrebodin Could you please let me know if there is any other way/workaround for this?
Right now i have manually added our UAT dotenv variable in this file: strapi-admin/admin/src/config.js: strapi/config.js at master · strapi/strapi · GitHub as we are only on UAT now, it’s working as expected on UAT.
But I need to add PROD dotenv variable as well before we go to PROD, not knowing how i can do that as i need to switch these UAT/PROD dotenv variables on UAT/PROD environments resp…

soupette248d ago

Maintainer

Hi @vinod77 now to we allow to customise the webpack configuration you can add env variable in the administration panel using webpack maybe it can help you achieve what you need?

You can do something as follows:

module.exports = {
  webpack: (config, webpack) => {
    const definePlugin = new webpack.DefinePlugin({
      MY_VAR: JSON.stringify('my var')
    });

    config.plugins.push(definePlugin);

    return config;
  }
}

I hope it helps

divyansh0777151d ago

Hello @soupette can you please let us know, how can we access this webpack under the Admin folder.

soupette151d ago

Maintainer

Hello here’s how to do it:

  1. First create a project

npx create-strapi-app my-app --quickstart --no-run

  1. Create a .env file and add your environment variable

touch my-app/.env

Path: my-app/.env

MY_VAR=my_var
  1. Extend the webpack config

mkdir my-app/admin touch my-app/admin/admin.config.js

Path: my-app/admin/admin.config.js

module.exports = { webpack: (config, webpack) => { // Add your variable using the DefinePlugin config.plugins.push( new webpack.DefinePlugin({ MY_VAR: JSON.stringify(process.env.MY_VAR), }) ); return config; }, };

  1. Use your variable in the admin

In the extended files of the admin panel

console.log(MY_VAR); // => 'my_var'

divyansh0777149d ago

@soupette @derrickmehaffy Please let me know, for which version this method supports?

I am currently using this one. Is it applicable for the below-listed version of strapi!
Node → v13.7.0
Strapi → v3.0.0-beta.18.4
OS → Ubuntu 16.04