Issues with `.env` in Docker image build

[criation]

Hej Plausible Team,

I'm curious that I am totally missunderstanding your doc's but I'm currently running into issues with my .env setup.

Currently following is the base:

.env
NUXT_PUBLIC_PLAUSIBLE_DOMAIN="webpage.com" NUXT_PUBLIC_PLAUSIBLE_API_HOST="https://plausible.webpage.com" //just examples .env is placed in project's root. Other variables in .env file are working well like

NUXT_PUBLIC_SUPABASE_URL="" NUXT_PUBLIC_SUPABASE_KEY=""

in nuxt.config.ts (also root of the project)

modules: [ [...], "@nuxtjs/plausible", ],

I tried different approaches like:

plausible: { domain: process.env.NUXT_PLAUSIBLE_DOMAIN, apiHost: process.env.NUXT_PLAUSIBLE_API_HOST, },

or accessing via runtimeConfig:

runtimeConfig: { public: { PLAUSIBLE_DOMAIN: process.env.NUXT_PUBLIC_PLAUSIBLE_DOMAIN, PLAUSIBLE_API_HOST: process.env.NUXT_PUBLIC_PLAUSIBLE_API_HOST, }, },

or even both combined.

If I place the URL and apiHost hardcoded in the plausible section it works fine. If I run my application with

yarn run start

Also fine (will be set in nuxt.public plausible section) ain't tracking because of settings to ignore localhost.

Building the docker image on server, it runs. Going trough a Gitlab Pipleline, these values are setted to default.

Please Can you help me?

Best Regards,

Chris

[johannschopplich]

Hi there!

Building the docker image on server, it runs.

Unfortunately, I don't understand what the issue is. Could you elaborate, please?

[criation]

Hej @johannschopplich thanks a lot coming back at me with this:

I apologize if my previous messages were unclear. I'll try to provide a clearer explanation of the issue I'm facing. I'm encountering problems with the values from my .env file in the Production Build using a Gitlab Pipeline. Below is my Dockerfile:

// dockerfile

# syntax=docker/dockerfile:1.4
ARG NODE_VERSION=18.14.2

FROM node:${NODE_VERSION}-slim as base

ARG PORT=3000

WORKDIR /src

# Build
FROM base as build

COPY --link package.json yarn.lock ./
RUN yarn install

COPY --link . .

RUN yarn build

# Run
FROM base

ENV PORT=$PORT

COPY --from=build /src/.output /src/.output

CMD [ "node", ".output/server/index.mjs" ]

According to the Plausible module documentation, it should work if I set these values in my .env file:

NUXT_PUBLIC_PLAUSIBLE_DOMAIN="abschlussfeier.criation.de"
NUXT_PUBLIC_PLAUSIBLE_API_HOST="https://plausible.criation.de"

However, when I do this, the default values are used in my Nuxt application:

// Script Tag in Pageheader
window.__NUXT__={};
window.__NUXT__.config={
  public:{
    // ...
    plausible:{
      hashMode:false,
      trackLocalhost:false,
      domain:"",
      apiHost:"https://plausible.io",
      autoPageviews:true,
      autoOutboundTracking:false
    }
  },
  app:{
    baseURL:"/",
    buildAssetsDir:"/_nuxt/",
    cdnURL:""
  }
}

I've tried the following in my nuxt.config.ts:

1. Adding the Plausible module:

// nuxt.config.ts

modules: [
    "@nuxtjs/tailwindcss",
    "@nuxtjs/supabase",
    // ... other modules
    "@nuxtjs/plausible",
  ],

2. Omitting the Plausible config.

3. Adding the Plausible config:

// nuxt.config.ts
plausible: {
  domain: 'abschlussfeier.criation.de', // process.env.NUXT_PLAUSIBLE_DOMAIN
  apiHost: 'https://plausible.criation.de', // process.env.NUXT_PLAUSIBLE_API_HOST,
},

When adding the Plausible config, the values are only read when hardcoded. If I use process.env, the value defaults again. It's worth noting that I also use the Supabase module in my project, and it works perfectly when I include only the module in nuxt.config.ts and set the variables in .env.

Any guidance on resolving this issue would be greatly appreciated.

Thank you!

[johannschopplich]

This doesn't seem like a bug related to this module, honestly. Setting up the environment variables in GitLab and accessing them in Docker can be tricky. You're right, for GitLab the .env auto-discovery won't work and you have to link your process.env.xyz variables manually.

I think you have a typo in your code. If this is your configuration:

NUXT_PUBLIC_PLAUSIBLE_DOMAIN="abschlussfeier.criation.de"
NUXT_PUBLIC_PLAUSIBLE_API_HOST="https://plausible.criation.de"

Then this should be your Nuxt config:

plausible: {
-  domain: process.env.NUXT_PLAUSIBLE_DOMAIN
+  domain: process.env.NUXT_PUBLIC_PLAUSIBLE_DOMAIN
-  apiHost: process.env.NUXT_PLAUSIBLE_API_HOST,
+  apiHost: process.env.NUXT_PUBLIC_PLAUSIBLE_API_HOST,
},

Note that PUBLIC_ was missing in your provided configuration.

[criation]

Yes sir, there was a typo. I think I tried too much last days.

Now, following Setup:

// nuxt.config.ts
plausible: {
    domain: process.env.NUXT_PUBLIC_PLAUSIBLE_DOMAIN, // 'abschlussfeier.criation.de',
    apiHost: process.env.NUXT_PUBLIC_PLAUSIBLE_API_HOST, //'https://plausible.criation.de',
  },

//.env
NUXT_PUBLIC_PLAUSIBLE_DOMAIN="abschlussfeier.criation.de"
NUXT_PUBLIC_PLAUSIBLE_API_HOST="https://plausible.criation.de"

The result in Page header again:

window.__NUXT__={};
window.__NUXT__.config=
  {
  public:{
    [...],

    plausible:{
      hashMode:false,
      trackLocalhost:false,
      domain:"",
      apiHost:"https://plausible.io"
      ,autoPageviews:true,
      autoOutboundTracking:false
    }
  },
  app:{
    baseURL:"/",
    buildAssetsDir:"/_nuxt/",
    cdnURL:""
  }
}

Maybe it's necessary to say that the variables are not set in the pipeline. If I understood it right, as working with supabase as well, it shall be possible to access the .env variables after build on the server via .env file, right?

[criation]

Okay, this seems to be an issue with the current setup based on gitlab pipelines and watchtower api. After manually starting the docker-compose manually again the variables seem to work fine.

@johannschopplich thanks a lot for your help and patience!

[johannschopplich]

Glad you found the solution!