Vite React app not loading Fly secrets

[soufin]

I’m deploying a Vite React app to fly.io with the following settings:

fly.toml

app = 'app-name'
primary_region = 'sea'

[build]

[http_service]
  internal_port = 80
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
  processes = ['app']

[[vm]]
  memory = '1gb'
  cpu_kind = 'shared'
  cpus = 1

Dockerfile

# This Dockerfile is for deploying to fly.io, not local use

FROM node:18 as build

WORKDIR /web

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:alpine

# Copy custom nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy the built React app
COPY --from=build /web/dist /usr/share/nginx/html

# This needs be referenced in fly.toml's internal_port, usually 80
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

nginx.confg

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

I ran flyctl deploy and everyone worked as expected. However when I visit the url for my app the app title loads, but it is a blank page. I am using Google Chrome on Windows 10.

I am using Supabase and Google OAuth as an auth provider and have added the associated secrets to the secrets for the project and redployed.

And in my code:

import { createClient } from "@supabase/supabase-js";

const SUPABASE_API_URL = import.meta.env.VITE_SUPABASE_API_URL;
const SUPABASE_KEY = import.meta.env.VITE_SUPABASE_KEY;

console.log(SUPABASE_API_URL);
console.log(SUPABASE_KEY);

// Create a single supabase client for interacting with your database
export const supabase = createClient(SUPABASE_API_URL, SUPABASE_KEY);

But I am getting the error:

Uncaught Error: supabaseUrl is required.
    at new r1 (index-CdXwDSwA.js:100:124872)
    at i1 (index-CdXwDSwA.js:100:127666)
    at index-CdXwDSwA.js:100:127841

The console.log are undefined.

What can I do to resolve this issue?

[lubien]

Hey there!

Although I haven’t used React with Vite I believe the issue here is that vite builds its static files at what we call “build time”. Our secrets are only available at runtime (when you machine is started) so frontend apps such as NextJS need to have these envs as build args.

Here’s the doc for NextJS build args: Run a NextJS App · Fly Docs

Roughly add this to your Dockerfile before the CMD part:

ARG VITE_SUPABASE_API_URL="value"
ARG VITE_SUPABASE_KEY="Other value"

I can see that you defined these as secrets thinking about security. But I think that since this project is client-side react either way these secrets are going to be in your bundle.js anyway so I assume this is fine to not-be-a-secret (please someone with Supabase knowledge correct me if Im wrong)

[soufin]

I believe these are secret keys and cannot be checked into git.

[rubys]

I’ve documented an indirect way of getting access to secrets at build time:

Build Secrets