How to add env variable in frontend

[jeff0723]

Issue summary

Write a short description of the issue here ↓ I tried to add analytics to my app. However, I can't access to env variable. How can I do that?

Expected behavior

What do you think should happen?

Actual behavior

What actually happens?

Tip: include an error message (in a <details></details> tag) if your issue is related to an error

Steps to reproduce the problem

Reduced test case

The best way to get your bug fixed is to provide a reduced test case.

Specifications

• Browser:
• Device:
• Operating System:

[fonya2014]

Hi! Here is the relevant information: https://shopify.dev/apps/tools/cli/commands#env

[jeff0723]

I follow this instruction and I still couldn't solve it. The issue is a set env variable on Heroku but some how it just cannot be read by the frontend.

[Agam1997]

Hey,

Same, Unable to add new environment variables on vite. on running the pull command the .env file gets created, but if i add new keys the same are not reflecting when i log to console.

[LordDashMe]

To add new env variable and use it on the Frontend side you need to register it on defineConfig({...}) under vite.config.js file found in the root directory of frontend.

1. First register the new env variable in the vite.config.js:

export default defineConfig({
  root: dirname(fileURLToPath(import.meta.url)),
  plugins: [react()],
  define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
    "process.env.<YOUR_NEW_ENV>": JSON.stringify(process.env.<YOUR_NEW_ENV>) // <-- Adding the new env to be accessible on the FE codes
  },
  resolve: {
    preserveSymlinks: true,
  },
  server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\\?.*)?$": proxyOptions,
      "^/api(/|(\\?.*)?$)": proxyOptions,
    },
  },
});

2. Now use it on the FE templates:

import { useState } from "react";
...
export default function Home () {
  ...
  return (
    ...
    <Link url={`${process.env.YOUR_NEW_ENV}`}></Link>
    ...
  );
} 

[Mzn98]

To add new env variable and use it on the Frontend side you need to register it on defineConfig({...}) under vite.config.js file found in the root directory of frontend.

1. First register the new env variable in the vite.config.js:

export default defineConfig({
  root: dirname(fileURLToPath(import.meta.url)),
  plugins: [react()],
  define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
    "process.env.<YOUR_NEW_ENV>": JSON.stringify(process.env.<YOUR_NEW_ENV>) // <-- Adding the new env to be accessible on the FE codes
  },
  resolve: {
    preserveSymlinks: true,
  },
  server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\\?.*)?$": proxyOptions,
      "^/api(/|(\\?.*)?$)": proxyOptions,
    },
  },
});

2. Now use it on the FE templates:

import { useState } from "react";
...
export default function Home () {
  ...
  return (
    ...
    <Link url={`${process.env.YOUR_NEW_ENV}`}></Link>
    ...
  );
} 

It works on production mode. However, when I run my app with "shopify app dev" command for development mode, my app runs and skip the vite.config.js file. So I cant using vite to define new env variable and use it on the frontend.

How can I do it on dev mode?

[LordDashMe]

It works on production mode. However, when I run my app with "shopify app dev" command for development mode, my app runs and skip the vite.config.js file. So I cant using vite to define new env variable and use it on the frontend.

How can I do it on dev mode?

@Mzn98 That should work for prod and dev environments. Can you show me how you configured the vite.config.js and how you used that env variables in the frontend codes? so that we can know the root cause.

[Sabarinath15]

I have the same issue on dev mode.

[jordan-quartermain]

Guys please, just change the build command in the package.json at the top level to

"build": "shopify app build --api-key=yourshopifyappapikey"

For some reason this isn't obvious, but that's what you need to do. Follow @LordDashMe to add a new variable first

[benkissi]

To add new env variable and use it on the Frontend side you need to register it on defineConfig({...}) under vite.config.js file found in the root directory of frontend.

1. First register the new env variable in the vite.config.js:

export default defineConfig({
  root: dirname(fileURLToPath(import.meta.url)),
  plugins: [react()],
  define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
    "process.env.<YOUR_NEW_ENV>": JSON.stringify(process.env.<YOUR_NEW_ENV>) // <-- Adding the new env to be accessible on the FE codes
  },
  resolve: {
    preserveSymlinks: true,
  },
  server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\\?.*)?$": proxyOptions,
      "^/api(/|(\\?.*)?$)": proxyOptions,
    },
  },
});

2. Now use it on the FE templates:

import { useState } from "react";
...
export default function Home () {
  ...
  return (
    ...
    <Link url={`${process.env.YOUR_NEW_ENV}`}></Link>
    ...
  );
} 

where should the .env file be placed? I have registered the variable in vite.config.js but I get undefined when using it in the frontend. My .env file is inside the frontend folder.

[kmacoders]

Following

[jinspe]

You can use env variable in your frontend using vite loadEnv:

in your vite.config.js

import { defineConfig, loadEnv } from "vite";

## Other stuffs


export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  console.log("TEST_FRONTEND_ENV", env.TEST_FRONTEND_ENV);
  return {
    root: dirname(fileURLToPath(import.meta.url)),
    plugins: [react()],
    define: {
      "process.env.SHOPIFY_API_KEY": JSON.stringify(
        process.env.SHOPIFY_API_KEY
      ),
      "process.env.TEST_FRONTEND_ENV": JSON.stringify(env.TEST_FRONTEND_ENV),
    },
    resolve: {
      preserveSymlinks: true,
    },
    server: {
      host: "localhost",
      port: process.env.FRONTEND_PORT,
      hmr: hmrConfig,
      proxy: {
        "^/(\\?.*)?$": proxyOptions,
        "^/api(/|(\\?.*)?$)": proxyOptions,
      },
    },
  };
});

Btw in local dev mode shopify is adding or overwriting SHOPIFY_API_KEY etc... You can also use process.env.SHOPIFY_API_KEY": JSON.stringify(env.SHOPIFY_API_KEY) instead of process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY)

The .env file is inside /web/frontend

[LordDashMe]

To add new env variable and use it on the Frontend side you need to register it on defineConfig({...}) under vite.config.js file found in the root directory of frontend.

1. First register the new env variable in the vite.config.js:

export default defineConfig({
  root: dirname(fileURLToPath(import.meta.url)),
  plugins: [react()],
  define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
    "process.env.<YOUR_NEW_ENV>": JSON.stringify(process.env.<YOUR_NEW_ENV>) // <-- Adding the new env to be accessible on the FE codes
  },
  resolve: {
    preserveSymlinks: true,
  },
  server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\\?.*)?$": proxyOptions,
      "^/api(/|(\\?.*)?$)": proxyOptions,
    },
  },
});

2. Now use it on the FE templates:

import { useState } from "react";
...
export default function Home () {
  ...
  return (
    ...
    <Link url={`${process.env.YOUR_NEW_ENV}`}></Link>
    ...
  );
} 

where should the .env file be placed? I have registered the variable in vite.config.js but I get undefined when using it in the frontend. My .env file is inside the frontend folder.

.env should be place under frontend/ folder where the vite.config.js is located

[LordDashMe]

To add new env variable and use it on the Frontend side you need to register it on defineConfig({...}) under vite.config.js file found in the root directory of frontend.

1. First register the new env variable in the vite.config.js:

export default defineConfig({
  root: dirname(fileURLToPath(import.meta.url)),
  plugins: [react()],
  define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
    "process.env.<YOUR_NEW_ENV>": JSON.stringify(process.env.<YOUR_NEW_ENV>) // <-- Adding the new env to be accessible on the FE codes
  },
  resolve: {
    preserveSymlinks: true,
  },
  server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\\?.*)?$": proxyOptions,
      "^/api(/|(\\?.*)?$)": proxyOptions,
    },
  },
});

2. Now use it on the FE templates:

import { useState } from "react";
...
export default function Home () {
  ...
  return (
    ...
    <Link url={`${process.env.YOUR_NEW_ENV}`}></Link>
    ...
  );
} 

To add more context with my first answer/solution:

• I'm using MacOS/Linux environment with shopify app template. So let me know if you're using Windows.

• I'm using dotenv package and it's also loaded/imported inside vite.config.js, take note of that. This prolly the main reason why you may experience undefined for the process.env variable.

[Oteiza-a]

To add more context with my first answer/solution:

• I'm using MacOS/Linux environment with shopify app template. So let me know if you're using Windows.
• I'm using dotConfig package and it's also loaded/imported inside vite.config.js, take note of that. This prolly the main reason why you may experience undefined for the process.env variable.

Thank you! I'll just guess you were talking about dotenv, i didn't find any library called dotConfig. I imported dotenv in my vite.config.js and it finally worked!

[LordDashMe]

Yes dotenv, I missed that. I edited the answer to correct it, thanks @Oteiza-a 🎉

[karooolis]

.env should be place under frontend/ folder where the vite.config.js is located

You may also keep using the same .env that is already stored in web/ by loading the environment variables from one-level above as such:

const env = loadEnv(mode, path.resolve(process.cwd() + '/..'), "");

[evan-north]

Try adding:

import dotenv from 'dotenv' dotenv.config()

in vite.config.js