Deploying from github does not read environment variable

[jhonysouza100]

My problem is the following:
When I deploy from github, my CapRover application runs successfully, but I cannot display the environment variable value entered by the Caprover interface. The app shows a value "undefined"

my captain-definition file:

 {
  "schemaVersion": 2,
  "dockerfileLines": [
    "FROM node:18-alpine",
    "WORKDIR /app",
    "COPY ./package.json /app/",
    "RUN npm install && npm cache clean --force",
    "COPY ./ /app",
    "ENV NODE_ENV production",
    "RUN npm run build",
    "CMD [ \"npm\",\"run\", \"preview\" ]"
  ]
}

my App.jsx file:

export default function App() {

  return (
    <>
      <h1>Vite + React</h1>
      {/* PROBLEM */}
      <h2>{`${import.meta.env.VITE_HELLO_WORLD}`}</h2>
      {/* PROBLEM */}
    </>
)}

my vite.config.js file:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  preview: {
    host: true,
    strictPort: true,
    port: 8080
  }
})

[githubsaturn]

You're reading your variable in your frontend code. The env vars aren't available in frontend. They are available ONLY during runtime. I'm not familiar with ViteJS - but if I were to guess it probably needs the env var on build time:

Read this section: https://caprover.com/docs/app-configuration.html#environment-variables

[jhonysouza100]

I understand, you should pass the value of the environment variable inside the container.

captain-definition file:

{
 "schemaVersion": 2,
 "dockerfileLines": [
   "FROM node:18-alpine",
   "WORKDIR /app",
   "COPY ./package.json /app/",
   "RUN npm install && npm cache clean --force",
   "COPY ./ /app",
   "ARG VITE_HELLO_WORLD",
   "ENV VITE_HELLO_WORLD $VITE_HELLO_WORLD",
   "ENV NODE_ENV production",
   "RUN npm run build",
   "CMD [ \"npm\",\"run\", \"preview\" ]"
 ]
} 

• ARG VITE_HELLO_WORLD: Defines a build argument for the environment variable "VITE_HELLO_WORLD". This argument can be provided during the build process.

• ENV VITE_HELLO_WORLD $VITE_HELLO_WORLD: Sets the environment variable "VITE_HELLO_WORLD" to the value of the build argument. This allows the environment variable to be customized during container build, for example, when using CapRover.

[githubsaturn]

Yes, that's correct! 👍