---

Firebase Studio is Google's cloud-based AI development environment. It runs entirely in the browser and combines a full IDE — based on Code OSS, the open-source core of VS Code — with Gemini AI for building web, mobile, and AI-powered applications. You can prototype an app from a text prompt, edit the code in a familiar IDE, preview it instantly, and push it to GitHub — all without installing anything locally.

Previously known as Project IDX, Firebase Studio was rebranded and expanded with deeper Gemini integration and an App Prototyping agent that can generate complete applications from natural language descriptions.

The default deploy target is Firebase Hosting. This guide covers the alternative: deploying Firebase Studio apps with [DeployHQ](https://www.deployhq.com), where you choose between free Static Hosting on Cloudflare's edge and full-server deployment to your own infrastructure. Firebase Auth, Firestore, Storage, and Cloud Functions continue to run on Google's infrastructure either way.

## Why Deploy Beyond Firebase Hosting?

Firebase Studio makes it easy to build and preview apps in the browser, and Firebase Hosting offers one-click deployment. For shipping a real project, owning the deploy makes more sense:

- **No vendor lock-in.** Your code runs on infrastructure you control — Cloudflare's edge (Static Hosting), Managed VPS, or any provider you already use
- **Predictable costs.** Cloudflare's edge is free during the Static Hosting beta; DeployHQ's pricing is flat across tiers, in contrast to Firebase's usage-based metering that can spike unpredictably as traffic grows
- **Full server control.** Configure caching, background jobs, custom build pipelines, and server-side logic without platform restrictions
- **Compliance flexibility.** Choose data center locations to meet GDPR, HIPAA, or other regulatory requirements
- **Custom domains and SSL.** Set up your domain and certificates exactly as you need, without Firebase's constraints

DeployHQ bridges the gap: you build in Firebase Studio, push to GitHub, and DeployHQ deploys to either Cloudflare's edge or any server you choose.

## Two Deploy Paths — Pick the Right One

Firebase Studio scaffolds projects across many frameworks. The right deploy target depends on which template the workspace started from and whether you need server-side rendering:

| Your Firebase Studio project | Deploy target | Why |
|---|---|---|
| Static-export build — Next.js with `output: 'export'`, Angular, Vite + React/Vue, Astro, Flutter web | **DeployHQ Static Hosting** | Compiled output ships to Cloudflare's edge for free during beta; framework auto-detected |
| Server-rendered Next.js, Node service, or anything that needs a runtime at request time | **DeployHQ Managed VPS or your own server** | Server code needs a Node runtime; Static Hosting doesn't provide one |
| Firebase App Hosting projects (Cloud Run SSR) | **Stay on Firebase Hosting** (or switch to static export first) | App Hosting provisions a Cloud Run instance; that runtime is fundamentally Google-bound and can't migrate to Static Hosting |

Both DeployHQ paths use the same project and the same Git workflow — only the deploy target differs. Firebase Auth, Firestore, Storage, and Cloud Functions all keep running on Google's infrastructure regardless of where you serve the frontend. The Firebase JS SDK in your client bundle talks to those services the same way whether the bundle is served from Firebase Hosting, Cloudflare's edge, or your own VPS.

## Step 1: Get Started with Firebase Studio

1. Go to [firebase.studio](https://firebase.studio) and sign in with your Google account
2. You'll have access to workspaces based on your plan:

| Tier | Workspaces | Cost |
|------|-----------|------|
| **Free** | 3 | $0 |
| **Google Developer Program (Standard)** | 10 | Free |
| **Google Developer Program (Premium)** | 30 | Paid subscription |

Firebase Studio is currently in **Preview** — free to use but not subject to any SLA.

## Step 2: Build Your App

Firebase Studio offers two ways to build:

### Option A: App Prototyping Agent (No-Code)

Use the App Prototyping agent to generate a complete application from a natural language description, an image, or even a drawing. Describe what you want:

```
Build a task management app with user authentication,
a dashboard showing tasks by status, and the ability
to assign tasks to team members.
```

Gemini generates a working Next.js application. You can iterate by chatting — ask for changes, new features, or fixes, and the agent updates the code automatically. Every response auto-commits to the workspace's Git history.

**Note:** The App Prototyping agent currently generates **Next.js apps only**. For Static Hosting deployment, you'll need to add `output: 'export'` to `next.config.js` — covered in the deployment walkthrough linked in Path A below. For other frameworks, use Code View.

### Option B: Code View (Full IDE)

Open Code View for a familiar VS Code-style editor with full terminal access. You can:

- Start from any of **60+ templates** — React, Angular, Vue, Next.js, SvelteKit, Flutter, Django, Rails, Go, and many more
- Import an existing project from GitHub, GitLab, or Bitbucket
- Upload a local project (up to 100MB)

Gemini AI is available in three modes within the editor:

- **Ask Mode** — conversational Q&A without modifying files
- **Agent Mode** — Gemini proposes code changes for your approval
- **Agent Auto-run** — Gemini works autonomously, writing code and running terminal commands

## Step 3: Push Your Project to GitHub

Before deploying with DeployHQ, push your code to a Git repository:

1. Open the **Source Control** pane in the sidebar (or use the terminal)
2. Stage and commit your changes
3. Click **Publish to GitHub** to create a new repository, or push to an existing one

Firebase Studio supports publishing to GitHub as a private or public repository. Once your code is on GitHub, it's ready for either DeployHQ path.

**Important:** Before publishing, check your files for any API keys or secrets that should not be committed. Firebase Studio does not automatically scan for secrets.

## Path A — DeployHQ Static Hosting (recommended for static builds)

If your Firebase Studio project builds to a static directory — Next.js with `output: 'export'`, Angular, Vite + React/Vue, Astro, or Flutter web — Static Hosting is the cleanest fit. It runs on Cloudflare's global edge, framework-detects the build, and is free during beta.

The end-to-end walkthrough — including the per-framework build configuration, the Firebase env-var prefix conventions (`NEXT_PUBLIC_FIREBASE_*` vs `VITE_FIREBASE_*` vs `NG_APP_FIREBASE_*`), updating Firebase Auth's authorized domains for the new URL, the OAuth-provider allowlist gotcha, and the Cloud Functions CORS configuration — lives in [How to Deploy a Firebase Studio App to DeployHQ Static Hosting](https://www.deployhq.com/blog/deploy-firebase-studio-app-to-deployhq-static-hosting). The whole loop takes under 20 minutes.

In summary: you connect DeployHQ to the GitHub repo, point it at Static Hosting, set the output directory to match your framework (`out/` for Next.js, `dist/` for Vite/Astro/Angular, `build/web/` for Flutter), enable SPA mode for client-side-routed frameworks, set the Firebase config env vars in DeployHQ's environment-variable UI, run `npm ci && npm run build` in the [build pipeline](https://www.deployhq.com/features/build-pipelines), and push. Then add the new domain to Firebase Auth's authorized domains list so sign-ins work from the new URL.

For the broader positioning around AI-built apps and Static Hosting, the [free static hosting for AI-built apps](https://www.deployhq.com/blog/free-static-hosting-for-ai-built-apps) post covers the choice between v0, Bolt, Lovable, and Firebase Studio as starting points and where each one fits.

## Path B — Your Own Server (Managed VPS, SFTP, SSH, Rsync)

If your Firebase Studio project uses server-side rendering, route handlers, or any Node-only feature that doesn't move to static export — or you've extended the project with a custom Node service beyond Cloud Functions — Static Hosting can't run that code. [DeployHQ Managed VPS](https://www.deployhq.com/hosting/managed-vps) — or a server you already run — keeps both the frontend and the Node server running end to end. Firebase services keep running on Google's infrastructure.

The pipeline:

1. **Create a DeployHQ project** and connect it to your GitHub, GitLab, or Bitbucket repository.
2. **Add a server** under **Servers & Groups → New Server**. Pick Managed VPS, SFTP, SSH, Rsync, or S3 depending on where you're hosting, and enter the connection details.
3. **Configure the build pipeline** under the project's Configuration tab. For most Firebase Studio projects, `npm ci && npm run build` covers the build. Adjust for Angular (`-- --configuration production`) or Flutter (`flutter build web`) as needed.
4. **Set environment variables** in DeployHQ's environment-variable UI — Next.js uses `NEXT_PUBLIC_FIREBASE_*`, Vite uses `VITE_FIREBASE_*`, Angular reads from `environment.production.ts` by default. Firebase Admin SDK service-account JSON, Functions deployment tokens, and other server-only credentials stay on the server side or in Cloud Functions runtime config.
5. **Set the deploy path** to where the server expects your files (`/var/www/your-app`, `/public_html`, or wherever your hosting provider drops compiled output).
6. **Deploy** from the **Deployments** tab — pick the branch (typically `main`), select the configured server, and click Deploy.

For a Node service that needs to run continuously (a custom Next.js server, an Express API, a background worker), set up a process manager (`pm2`, `systemd`, or your provider's equivalent) and a post-deploy SSH command to restart it after each deploy.

After the first deploy, add the new domain to **Firebase Authentication → Settings → Authorized domains** so OAuth and email-link sign-ins work from the new URL. This applies regardless of which path you picked.

[Sign up free for DeployHQ](https://www.deployhq.com/signup) to start a project — the free tier covers the first connected repo, and the included Static Hosting site lets you try Path A end to end before deciding which suits the project.

## Step 5: Set Up Automatic Deployments

Configure DeployHQ to deploy automatically every time you push code:

1. In your DeployHQ project, go to **[Automatic Deployments](https://www.deployhq.com/features/automatic-deployments)** and copy the webhook URL
2. In your GitHub repository, go to **Settings > Webhooks** and add the URL
3. Set the trigger to fire on push events for your deployment branch (typically `main`)

From this point on, the workflow is fully automated: you make changes in Firebase Studio, push to GitHub, and DeployHQ builds and deploys — no manual steps required. The same webhook works whether you're deploying via Path A (Static Hosting) or Path B (Managed VPS or your own server) — DeployHQ runs whichever pipeline you configured.

## Step 6: Configure Your AI Rules

Firebase Studio supports project-level AI configuration through `.idx/airules.md` or `GEMINI.md` files. Use these to guide Gemini's code generation:

```markdown
This is a Next.js 15 application using TypeScript and Tailwind CSS.

Conventions:
- Use the App Router with Server Components by default
- Use Zod for form validation
- Follow the existing component structure in src/components/
- Write descriptive commit messages
```

These rules are included in Gemini's context for all AI interactions in the workspace. If you're deploying via Path A, add a rule that reminds Gemini to keep `output: 'export'` in `next.config.js` and to avoid server actions or App Router server components — useful guardrails for a static-export project.

## Step 7: Monitor Your Deployments

DeployHQ provides a dashboard showing the status of every deployment — files transferred, build logs, errors, and timing. If a deployment introduces a problem, use DeployHQ's [one-click rollback](https://www.deployhq.com/features/one-click-rollback) feature to restore the previous version immediately.

## Firebase Hosting vs. DeployHQ: When to Switch

Firebase Hosting is fine for prototypes and small projects. Consider DeployHQ when:

- **Traffic is growing** and Firebase's usage-based pricing becomes unpredictable
- **You need server-level control** — cron jobs, custom caching, background workers (Path B)
- **You want free Cloudflare-edge hosting** for a static-export project (Path A)
- **Compliance requires specific data residency** — you need to choose where your data lives
- **You want one deployment tool for everything** — DeployHQ works with any framework, any server, any Git provider
- **Your team uses multiple AI tools** — whether code comes from Firebase Studio, Cursor, Windsurf, or a direct commit, DeployHQ deploys it the same way

## Building With Other AI Tools?

If you're evaluating the broader AI-app-builder landscape, the DeployHQ deployment guides cover the major options:

- [Lovable](https://www.deployhq.com/guides/lovable) — Vite + React with Supabase backend
- [Bolt](https://www.deployhq.com/guides/bolt) — framework-agnostic (Vite, Astro, SvelteKit, Next.js, Remix)
- [v0](https://www.deployhq.com/guides/v0) — Vercel's AI-powered platform, primarily Next.js
- [Replit](https://www.deployhq.com/guides/replit) — full development environment with deploys

For AI-assisted coding editors that work alongside your local stack, see the [Cursor](https://www.deployhq.com/guides/cursor), [Windsurf](https://www.deployhq.com/guides/windsurf), [GitHub Copilot](https://www.deployhq.com/guides/github-copilot), and [Cline](https://www.deployhq.com/guides/cline) setup guides.

---

Questions or feedback on deploying Firebase Studio projects with DeployHQ? Email [support@deployhq.com](mailto:support@deployhq.com) or follow [@deployhq](https://x.com/deployhq) on X for product updates.