Frontend Configuration

Both the marketing site and SaaS app are React applications built with Vite. This page covers how environment variables are handled and how the frontends connect to the API.

Environment Variables in Vite

Vite exposes environment variables to the browser using the VITE_ prefix. Variables without this prefix are not available in the browser bundle for security reasons.

Access them in code with:

const apiUrl = import.meta.env.VITE_API_URL;

.env file (local, never committed):

VITE_API_URL=https://api.geoassistant.localhost
VITE_APP_URL=https://geoassistant.localhost

Production values are set directly in Netlify or Vercel dashboards — no .env file needed on the server.

Warning

Never put secrets in VITE_ variables. They are embedded in the browser bundle and visible to anyone who inspects the JavaScript.

Marketing Site

The marketing site (geoassistant.org) handles the entry point for authentication. The TopBar component checks if the user is logged in by calling /user/me and shows either a Sign In or Log Out button.

Authentication check:

useEffect(() => {
  fetch(`${import.meta.env.VITE_API_URL}/user/me`, {
    method: "GET",
    credentials: "include", // Required for cross-origin cookies
  })
    .then(res => { if (!res.ok) throw new Error(); return res.json(); })
    .then(data => setUser(data))
    .catch(() => setUser(null));
}, []);

credentials: "include" is critical — without it, the browser will not send the session cookie cross-origin.

Login redirect:

const loginUrl = `${import.meta.env.VITE_API_URL}/auth/login?redirect_to=${import.meta.env.VITE_APP_URL}`;

window.location.href = loginUrl;

The redirect_to parameter tells the API where to send the user after successful login.

SaaS App

The SaaS app (app.geoassistant.org) is deployed on Vercel. It connects to the API using the same environment variable pattern.

Vercel environment variables:

VITE_API_URL=https://api.geoassistant.org
VITE_APP_URL=https://app.geoassistant.org

Deployment Flow

Both frontends deploy automatically on every push to their respective GitHub repos:

• Marketing site → push to repo → Netlify builds and deploys

• SaaS app → push to repo → Vercel builds and deploys

No manual steps needed after initial setup.

Note

After adding or changing environment variables in Netlify or Vercel, trigger a manual redeploy for the new values to take effect in the built bundle.