# Vite React app not loading Fly secrets

**URL:** <https://community.fly.io/t/vite-react-app-not-loading-fly-secrets/18468>\
**Category:** Questions / Help\
**Tags:** login-only\
**Created:** [February 29, 2024, 8:33am UTC](https://community.fly.io/t/vite-react-app-not-loading-fly-secrets/18468 "2024-02-29T08:33:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![soufin](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@soufin](https://community.fly.io/u/soufin)\
**Post date:** [February 29, 2024, 8:33am UTC](https://community.fly.io/t/vite-react-app-not-loading-fly-secrets/18468/1 "2024-02-29T08:33:09Z")

</div>

I’m deploying a Vite React app to [fly.io](http://fly.io) with the following settings:

fly.toml

```auto
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

```auto
# 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

```auto
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.

 ![image](https://global.discourse-cdn.com/fly1/original/3X/2/6/26ad5b41a4d1b0e4e5bf54a6e1dedc629fdaf765.png)

And in my code:

```auto
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:

```auto
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?

---

<div class="post-metadata">

**Author:** ![soufin](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@soufin](https://community.fly.io/u/soufin)\
**Post date:** [February 29, 2024, 9:33am UTC](https://community.fly.io/t/vite-react-app-not-loading-fly-secrets/18468/2 "2024-02-29T09:33:09Z")

</div>

Category updated on February 29, 2024, 9:33am UTC

From #General to #Questions / Help

---

<div class="post-metadata">

**Author:** ![lubien](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/lubien/32/41919_2.png) [@lubien](https://community.fly.io/u/lubien)\
**Post date:** [February 29, 2024, 11:51am UTC](https://community.fly.io/t/vite-react-app-not-loading-fly-secrets/18468/3 "2024-02-29T11:51:17Z")

</div>

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](https://fly.io/docs/js/frameworks/nextjs/#exposing-environment-variables-to-the-browser)

Roughly add this to your Dockerfile before the CMD part:

```Dockerfile
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)

---

<div class="post-metadata">

**Author:** ![soufin](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@soufin](https://community.fly.io/u/soufin)\
**Post date:** [February 29, 2024, 9:15pm UTC](https://community.fly.io/t/vite-react-app-not-loading-fly-secrets/18468/4 "2024-02-29T21:15:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rubys](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/rubys/32/16907_2.png) [@rubys](https://community.fly.io/u/rubys)\
**Post date:** [February 29, 2024, 9:21pm UTC](https://community.fly.io/t/vite-react-app-not-loading-fly-secrets/18468/5 "2024-02-29T21:21:20Z")

</div>

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

> **[Build Secrets](https://fly.io/docs/reference/build-secrets/#automate-the-inclusion-of-build-secrets-using-an-ephemeral-machine)**
>
> Documentation and guides from the team at Fly.io.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/fly1/original/3X/6/e/6e8955d00cb218e186ebbe3a6ab06fefdce15290.svg) [@system](https://community.fly.io/u/system)\
**Post date:** [March 7, 2024, 9:21pm UTC](https://community.fly.io/t/vite-react-app-not-loading-fly-secrets/18468/6 "2024-03-07T21:21:27Z")

</div>

Closed on March 7, 2024, 9:21pm UTC

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.