Does PlasmicLoader fetch on client or server side?

Developer Support
1

Plasmic-init and local env:
Does plasmic loader fetch on client side or server side?

I can’t seem to get local env passed to the plasmic-init…

image.png

2

Either, but all our quickstarts for Next.js and Gatsby assume server side (static). What’s the issue you’re seeing?

3

the variables are not getting passed to plasmic-init file

4

I can see in the terminal that the env file is getting loaded

5

I do get an network error that the token is invalid. And after inspection with Dev tools in the browser id & token are undefined. So I am unsure whats going on.

env.local file is in root, Terminal logs that its been loaded

6

If you’re using Next, you’ll have to use special variable names to expose them to the browser: https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

But ideally the browser would not need to fetch anything from Plasmic at all, and all the fetching should’ve been done on the server during SSR/SSG

7

I don’t want to expose the variables in the browser and I am not

8

And yes I am using Next

9

oh do you mean even on the server, you cannot read process.env.PLASMIC_ID? How are you specifying it, and if you just do console.log(process.env.PLASMIC_ID) do you see the right value?

10

I am specifying it in env.local and yes even as server variable. I did console.log and it just returned undefined

11

PLASMIC_ID=“…”
PLASMIC_TOKEN=“…”

12

But with real values ofc

13

Note: that passing the env variables as browser accessible works. But not the when as server variables

14

Any answer on this? I’ve got some code that uses usePlasmicQueryData to (I think) hide API keys from clientside views, but I can’t even get it to work on the init file in the simplest way possible.

I can’t reference anything in my .env.local file (nor when it’s just .env)

console.log('PLASMIC_ID:', process.env.PLASMIC_ID);
console.log('PLASMIC_TOKEN:', process.env.PLASMIC_TOKEN);
console.log('CAISY_PROJECT_ID:', process.env.CAISY_PROJECT_ID);

export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: process.env.PLASMIC_ID,
      token: process.env.PLASMIC_TOKEN,
    },
  ],

image