Unable to access env variable in my vite react app

General
,
1

I am trying to dockerize the react vite app from monorepo but bundles my backend code with it and without that it won’t build, I have similar structure in my monorepo as this monorepo example

I get warning from elysia which says “found elysia’s server instance which is not good for security” and i am unable to access the env variable only in my vite react app.

web/react vite app dockerfile

FROM oven/bun:1

# Set the working directory in the container
WORKDIR /app

COPY bun.lockb  /app
COPY package.json  /app
COPY packages/libs  /app/packages/libs
COPY apps /app/apps/

# Install your application's dependencies
RUN bun install --frozen-lockfile --production

# Set the working directory in the container
WORKDIR /app/apps/web

RUN bun run build

EXPOSE 8080

CMD [ "bun", "run", "preview" ]

and this is my compose file

services:
  backend:
    build:
      context: .
      dockerfile: ./docker/backend.Dockerfile
    ports:
      - 5500:5500
    env_file:
      - path: ./apps/backend/.env
        required: true

  web:
    build:
      context: .
      dockerfile: ./docker/web.Dockerfile
    ports:
      - 8080:8080
    environment:
      - VITE_BASE_URL= ${VITE_BASE_URL:-http://localhost:5500}
2

I have no idea about that

Which one? VITE_BASE_URL? how do you want to access it? Where? If the variable is available in the container’s shell, it is a vite issue and I can’t help with that either.

1 Like
3

VITE_BASE_URL is backend service url which needs to accessed for API calls in frontend vite react app.

Is my web dockerfile okay for making container?

4

On first glance it looks okay. @rimelek meant to go into your container with a shell and check if the env var is set. That’s the check for the Docker part.

docker run -it <c-id> sh

echo $VITE_BASE_URL

If it’s there, then you have to check why vite is not using it. I know from SvelteKit that vite has some particular behaviors with env vars. Check in an according forum.

1 Like
5

I forgot about this topic. Thanks @bluepuma77 for stepping in with the command to test the variable. Yes, I meant that.

That is for making an image, but your compose file should not have a space after the equal sign in the environment section. You either the mapping syntax with a space after the colon or the list syntax without space. Otherwise your URL will start with a space and if your app doesn’t trim that space, the URL will be invalid and could be ignored, but that is just a huge guess without knowing the app.

Mapping:

    environment:
      VITE_BASE_URL: ${VITE_BASE_URL:-http://localhost:5500}

List:

    environment:
      - VITE_BASE_URL=${VITE_BASE_URL:-http://localhost:5500}
1 Like
6

thanks for the advice, at least now I have a direction to go, again thanks a lot.

7

thanks man, I think its vite’s issue

8

Hi,

I had the same issue. I resolved it with next indications: How to Use the NGINX Docker Official Image | Docker

Also he has a github project to show it: GitHub - pmckeetx/docker-nginx

I hope you resolve it.

The most important think is that you must sent the environment variables in build section and it is nos important because is about internal network.

Best regards

1 Like