Why Your Google AI Studio App Is Blank After Deploying (and How to Fix It)

Why this happens

Your app worked in the AI Studio preview, maybe even locally, and then you deployed it and got a blank page or a 404. This is almost always one of four things, and none of them mean the app is broken. Here they are, quickest to check first — open your browser's developer console before you start, because it usually tells you which one you have hit.

1. You deployed the source, not the build

The most common cause. AI Studio hands you a project folder; a host needs the built output. If you uploaded package.json, a src/ folder, and vite.config.ts, the host is serving raw source it cannot run, so you get a blank page.

Fix: build the project first, then deploy the resulting dist/ folder — its contents, not the whole project. React2Static runs that build in your browser and hands you the dist/ folder ready to upload. On Netlify or Cloudflare Pages, drag in the built folder, never the project folder.

2. Blank page with 404s on the JS and CSS files

Look in the console. If you see 404s for files like /assets/index-abc123.js, the page loaded but its scripts did not: the app is requesting its files from the site root, but they are hosted somewhere else. This bites people on GitHub Pages, where a project site is served from /your-repo/ instead of /.

Fix: set the base path in vite.config.ts to match where the app lives. For a root domain it is "/"; for a GitHub Pages project site it is "/your-repo/":

// vite.config.ts
export default defineConfig({
  base: '/your-repo/',
});

Rebuild after changing it. If you host at the root of a domain or on a *.pages.dev / *.netlify.app subdomain, the default "/" is already correct — which is why deploying to Cloudflare Pages or Netlify sidesteps this problem entirely.

3. "API key is undefined" or the AI features do nothing

The app loads, but anything that calls Gemini fails. Two sub-cases:

The environment variable is not set on the host. Add it in the host's settings — on Netlify under Site settings then Environment variables, on Cloudflare Pages under Settings then Environment variables — using the exact name the code expects, then redeploy.

The variable is set, but the value is a secret that should not ship. A key bundled into front-end JavaScript is readable by anyone who opens the site. For a private demo that may be fine; for anything public, move the Gemini call behind a small serverless function (Netlify Functions, Cloudflare Workers) so the key stays on the server and never reaches the browser.

Not sure whether your build is about to leak a key? React2Static scans the project for exposed secrets before you download it and flags them, so you find out before the app is live rather than after.

4. The home page works, but refreshing any other page gives 404

Your app uses client-side routing (React Router and similar). The first visit works because it starts at index.html; when you refresh /about, the host looks for a real file at /about, does not find one, and returns 404.

Fix: tell the host to serve index.html for unknown paths.

Netlify — add a _redirects file to the deployed folder:

/*    /index.html   200

Cloudflare Pages — serves index.html for unknown single-page-app routes by default; if yours does not, add the same _redirects rule.

GitHub Pages — has no such fallback. Either switch the app to hash routing or copy index.html to 404.html.

Tip: some AI Studio apps ship with HashRouter already (URLs contain a #), which avoids this problem completely.

A safer default: export to static files first

Three of these four traps share one root cause — source was shipped instead of a proper build, or it landed on a host that expected the opposite. Building to static files first, then deploying those files to a host that serves them from the root, removes most of the risk before it starts. That is the flow in Deploy a Google AI Studio app for free (no Cloud Run needed). If this is new to you, run the app locally first so you know it works before it goes public.

FAQ

Why is my Google AI Studio app blank after deploying?

Most often because the source folder was uploaded instead of the built dist/ folder, or the build's base path does not match where it is hosted. Missing environment variables and single-page-app routing are the other two common causes.

Why do I get 404 errors for my JavaScript files?

The base path is wrong for where the app is hosted. Set base in vite.config.ts to "/" for a root domain or "/your-repo/" for a GitHub Pages project site, then rebuild.

Why does refreshing the page give a 404?

Client-side routing needs the host to fall back to index.html for unknown paths. Add a _redirects rule on Netlify or Cloudflare Pages, or use hash routing on GitHub Pages.

Is it safe to put my Gemini API key in the deployed app?

No — a key in front-end code is visible to anyone who opens the site. For anything public, call Gemini through a serverless function so the key stays on the server.