How do I access environment variables or config from the front end?

Discussions
5

I’m not sure if it’s the same in Strapi v4, but in v3:

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: {
          CLIENT_URL: JSON.stringify(process.env.CLIENT_URL),
        },
      })
    );
    // Important: return the modified config
    return config;
  },
};

./src/admin/admin.config.js

Then in your frontend component:

const clientUrl = CUSTOM_VARIABLES.CLIENT_URL