How to add env variable in frontend #1130

jeff0723 · 2022-10-19T07:13:54Z

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:

The text was updated successfully, but these errors were encountered:

fonya2014 · 2022-10-19T08:32:44Z

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

jeff0723 · 2022-10-20T02:03:52Z

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 · 2023-03-09T08:07:28Z

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 · 2023-04-12T08:57:23Z

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.

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,
    },
  },
});

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 · 2023-04-25T02:38:20Z

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.

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,
    },
  },
});

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 · 2023-04-25T04:42:54Z

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 · 2023-05-02T09:11:29Z

I have the same issue on dev mode.

jordan-quartermain · 2023-06-12T06:51:26Z

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 · 2023-07-14T06:00:02Z

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.

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,
    },
  },
});

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 · 2023-07-17T16:40:41Z

Following

jinspe · 2023-07-31T18:45:12Z

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 · 2023-08-01T11:30:08Z

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.

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,
    },
  },
});

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 · 2023-08-01T11:32:13Z

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.

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,
    },
  },
});

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 · 2023-09-11T20:34:05Z

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 · 2023-09-12T00:41:29Z

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

karooolis · 2024-01-29T19:50:40Z

.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 · 2024-02-03T23:52:13Z

Try adding:

import dotenv from 'dotenv'
dotenv.config()

in vite.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to add env variable in frontend #1130

How to add env variable in frontend #1130

jeff0723 commented Oct 19, 2022

fonya2014 commented Oct 19, 2022

jeff0723 commented Oct 20, 2022

Agam1997 commented Mar 9, 2023

LordDashMe commented Apr 12, 2023

Mzn98 commented Apr 25, 2023

LordDashMe commented Apr 25, 2023

Sabarinath15 commented May 2, 2023 •

edited

Loading

jordan-quartermain commented Jun 12, 2023 •

edited

Loading

benkissi commented Jul 14, 2023 •

edited

Loading

kmacoders commented Jul 17, 2023

jinspe commented Jul 31, 2023 •

edited

Loading

LordDashMe commented Aug 1, 2023

LordDashMe commented Aug 1, 2023 •

edited

Loading

Oteiza-a commented Sep 11, 2023

LordDashMe commented Sep 12, 2023

karooolis commented Jan 29, 2024 •

edited

Loading

evan-north commented Feb 3, 2024 •

edited

Loading

How to add env variable in frontend #1130

How to add env variable in frontend #1130

Comments

jeff0723 commented Oct 19, 2022

Issue summary

Expected behavior

Actual behavior

Steps to reproduce the problem

Reduced test case

Specifications

fonya2014 commented Oct 19, 2022

jeff0723 commented Oct 20, 2022

Agam1997 commented Mar 9, 2023

LordDashMe commented Apr 12, 2023

Mzn98 commented Apr 25, 2023

LordDashMe commented Apr 25, 2023

Sabarinath15 commented May 2, 2023 • edited Loading

jordan-quartermain commented Jun 12, 2023 • edited Loading

benkissi commented Jul 14, 2023 • edited Loading

kmacoders commented Jul 17, 2023

jinspe commented Jul 31, 2023 • edited Loading

LordDashMe commented Aug 1, 2023

LordDashMe commented Aug 1, 2023 • edited Loading

Oteiza-a commented Sep 11, 2023

LordDashMe commented Sep 12, 2023

karooolis commented Jan 29, 2024 • edited Loading

evan-north commented Feb 3, 2024 • edited Loading

Sabarinath15 commented May 2, 2023 •

edited

Loading

jordan-quartermain commented Jun 12, 2023 •

edited

Loading

benkissi commented Jul 14, 2023 •

edited

Loading

jinspe commented Jul 31, 2023 •

edited

Loading

LordDashMe commented Aug 1, 2023 •

edited

Loading

karooolis commented Jan 29, 2024 •

edited

Loading

evan-north commented Feb 3, 2024 •

edited

Loading