Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[HELP] Problem accessing env vars in ts #17

Closed
ssb-jnk opened this issue Apr 9, 2024 · 5 comments
Closed

[HELP] Problem accessing env vars in ts #17

ssb-jnk opened this issue Apr 9, 2024 · 5 comments

Comments

@ssb-jnk
Copy link

ssb-jnk commented Apr 9, 2024 •
edited
Loading

Greetings!

I am having an issue using vite-envs. I have followed the starter guide to get everything up and running, and it does seem like things do happen behind the scenes, such as index.html including environment variables from --env in docker run. But when i try to access the variabels with import.meta.env.A, then its undefined or empty rather.

I have a server.js which runs ViteExpress and serves as the apps BFF, and then using nodemon to run it in prod.

"scripts": {
    "prepare": "npx vite-envs update-types",
    "dev": "nodemon server.js -w server.js",
    "prod": "NODE_ENV=production node server.js",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --fix --ignore-path ./.gitignore",
    "lint:format": "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
    "preview": "vite preview"
  },

Vite-envs version
"vite-envs": "^4.0.13"

I have tried logging what import.meta.env contains, and it does contain the variables but not the values themselves, values are empty, even though the values are visible in index.html (i know this because i decoded the base64 to verify the values).

Variables are defined in .env (empty because i want to set it with docker):

A=
B=
C=
D=

Dockerfile:

FROM node:20-alpine AS builder
WORKDIR /usr/local/app
COPY . .
RUN npm ci && npm run build


FROM node:20-alpine
WORKDIR /usr/local/app

COPY --from=builder /usr/local/app/dist ./dist
COPY package*.json server.js ./

RUN npm install --save-exact express vite-express \
    && cp -r dist/* .

ENV PORT=8080
EXPOSE 8080

ENTRYPOINT ["sh", "-c", "./vite-envs.sh && npm run prod"]

I run it like this

docker run -it -p 8080:8080 \
  --env A="A" \
  --env B="B" \
  --env C="C" \
  --env D="D" local-app-test

Response in console when printing import.meta.env

{
    "BASE_URL": "/",
    "MODE": "production",
    "DEV": "false",
    "PROD": "true",
    "A": "",
    "B": "",
    "C": "",
    "D": ""
}

index.html in the docker container when app is running

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App test</title>

    <script data-script-description="Environment variables injected by vite-envs">
      var envWithValuesInBase64 = { CONTAINS ALL THE BASE64 KEY VALUE PAIRS }
      var env = {};
      Object.keys(envWithValuesInBase64).forEach(function (name) {
        env[name] = new TextDecoder().decode(
          Uint8Array.from(
            atob(envWithValuesInBase64[name]),
            c => c.charCodeAt(0))
        ).slice(0,-1);
      });
      window.__VITE_ENVS = env;
    </script><script type="module" crossorigin="" src="/assets/index-D6asdcv.js"></script>
    <link rel="stylesheet" crossorigin="" href="/assets/index-asdzcAwd.css">
  </head>
  <body>
    <div id="root"></div>


</body></html>

Do you have any idea to what might be wrong? Feels like i hit a plateau, so any help would be greatly appreciated
@ssb-jnk ssb-jnk changed the title Problems accessing env vars in ts [HELP] Problems accessing env vars in ts Apr 9, 2024
@ssb-jnk ssb-jnk changed the title [HELP] Problems accessing env vars in ts [HELP] Problem accessing env vars in ts Apr 9, 2024
@garronej
Copy link
Owner

garronej commented Apr 9, 2024

Hello @ssb-jnk,

Is your project open source? If so, I can take a direct look. Otherwise, we can schedule a quick call to resolve this issue. Given that you are from Statistics Norway, you are entitled to special treatment. :)

@ssb-jnk
Copy link
Author

ssb-jnk commented Apr 9, 2024

@garronej Thank you for responding so quickly!

I'll gladly accept any VIP treatment! The repository is set to internal, but will at some point be public, there is not any sensitive information in the repository. I have given you read access to the repository. Link directly to the branch containing everything related to vite-envs. Any help is greatly appreciated, thanks!

Could also set up a call if that would be easier.

@garronej
Copy link
Owner

garronej commented Apr 9, 2024

@ssb-jnk,

Here you go:

Dockerfile

 RUN npm install --save-exact express vite-express
-    && cp -r dist/* .

 ENV PORT=8080
 EXPOSE 8080

-ENTRYPOINT ["sh", "-c", "./vite-envs.sh && npm run prod"]
+ENTRYPOINT ["sh", "-c", "./dist/vite-envs.sh && npm run prod"]

Best

@garronej garronej closed this as completed Apr 9, 2024
@ssb-jnk
Copy link
Author

ssb-jnk commented Apr 9, 2024 •
edited
Loading

Thank you for the response @garronej! And yes this solved the problem. I tried it earlier but i got a token error where it pointed to the data in the base64 key value map, but your response made me look more into it!

Looks like it doesnt like the length of the values. I tried shortening ADMIN_GROUPS, then it worked, and then i tried adding more letters to another env var, and then it caused invalid token error

docker run -it -p 8080:8080 \
  --env ADMIN_GROUPS="ASD-ASD-developers,ASD-ASD-developers,ASD-ASD-developers" \
  --env DOCUMENTATION_URL="https://ASD-ASD.atlassian.net/wiki/x/EYC24g" \
  --env ASD_ASD_URL="https://ASD.ASD-ASD.ASD.ASd" \
  --env ASD_ASD_ASD_URL="https://ASD-ASD-ASD-ASD.ASD-ASD-ASd.ASD.ASD" \
  --env PORT=8080 local-ASD-ASD

Looking more into it, it forced a new line in the middle of a value in index.html, because its too long, or something else?

Thank you so much! :)

@garronej garronej reopened this Apr 10, 2024
garronej added a commit that referenced this issue Apr 10, 2024
@garronej
#17
78a900a
@garronej
Copy link
Owner

@ssb-jnk,
Thanks a lot for figuring this out!
This was indeed a major bug!

Sould be fixed in the last release.

Let me know if there are any remaining issues.

Best

@ssb-jnk ssb-jnk mentioned this issue Apr 10, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@garronej @ssb-jnk