Issues with `.env` in Docker image build about plausible HOT 6 CLOSED

Hi there!

Building the docker image on server, it runs.

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

from plausible.

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!

from plausible.

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.

from plausible.

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?

from plausible.

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!

from plausible.

Glad you found the solution!

from plausible.