Vite not importing environment variables or secrets Laravel 9 deployment

Questions / Help Build debugging
1

So i was building my application but a major part of it requires environment variables from vite which
I am using laravel echo here:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    wsHost: window.location.hostname,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: false,
    disableStats: true,
    enabledTransports: ['ws', 'wss'],
});

But in the compiled file the environment variables are shown as empty/undefined: this is from the compiled file

window.Echo = new qy({
    broadcaster: "pusher",
    key: {}.VITE_PUSHER_APP_KEY,
    cluster: {}.VITE_PUSHER_APP_CLUSTER ?? "mt1",
    wsHost: window.location.hostname,
    wsPort: {}.VITE_PUSHER_PORT ?? 80,
    wssPort: {}.VITE_PUSHER_PORT ?? 443,
    forceTLS: !1,
    disableStats: !0,
    enabledTransports: ["ws", "wss"]
});

for example the key: is coming something like {}.VITE_PUSHER_KEY, this configuration works in development under npm run dev and build both, and is as per the naming convention of the prefix “VITE_” for import.meta variables in the vite docs. I have tried adding the variables as secrets but I still get the undefined variables in the compiled file

1 Like
2

This has happened to us too. The key is that you need to make the Dockerfile aware of your environment variables on build time.

In the Dockerfile you can see the vite build is being created under the node_modules_go_brrr section (great name BTW):

RUN if [ -f "vite.config.js" ]; then \
        ASSET_CMD="build"; \
    else \
        ASSET_CMD="production"; \
    fi; \
    if [ -f "yarn.lock" ]; then \
        yarn install --frozen-lockfile; \
        yarn $ASSET_CMD; \
    elif [ -f "pnpm-lock.yaml" ]; then \
        corepack enable && corepack prepare pnpm@latest-7 --activate; \
        pnpm install --frozen-lockfile; \
        pnpm run $ASSET_CMD; \
    elif [ -f "package-lock.json" ]; then \
        npm ci --no-audit; \
        npm run $ASSET_CMD; \
    else \
        npm install; \
        npm run $ASSET_CMD; \
    fi;

You need to do two things, first add an argument inside your Dockerfile, for example:

ARG API_BASE_URL
ENV VITE_API_BASE_URL $API_BASE_URL

And then provide that ARG using the --build-arg flag on the fly deploy command like so:

flyctl deploy --build-arg API_BASE_URL="https://foo.bar/api"

Hope this helps! :smiley:

2 Likes
3

Thanks :joy:

Here’s docs using secrets within builds: Build Secrets · Fly Docs (unfortunately they aren’t just present at build time due to Docker things).