How to Deploy a Firebase Studio App to Your Own Server with DeployHQ

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 in April 2025 with deeper Gemini integration and an App Prototyping agent that can generate complete applications from natural language descriptions.

This guide covers how to use Firebase Studio and deploy your project to your own server with DeployHQ — giving you full control over hosting, costs, and infrastructure.

Why Deploy Beyond Firebase?

Firebase Studio makes it easy to build and preview apps in the browser, and Firebase Hosting offers one-click deployment. But for many teams, deploying to your own server makes more sense:

• No vendor lock-in: your code runs on infrastructure you control — AWS, DigitalOcean, Hetzner, or any VPS provider
• Predictable costs: a fixed-price VPS is easier to budget than Firebase's usage-based pricing, which 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 any server you choose.

Step 1: Get Started with Firebase Studio

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

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 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 DeployHQ.

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.

Step 4: Deploy with DeployHQ

Now that your project is on GitHub, set up DeployHQ to automate deployments to your own server.

1. Create a DeployHQ project — log in at deployhq.com and click New Project

2. Connect your repository — authorize DeployHQ to access your GitHub account and select the repository you published from Firebase Studio

3. Configure the build pipeline — most Firebase Studio projects need a build step. In your DeployHQ project, go to Build Pipelines and add:

For a Next.js app (from App Prototyping): npm install npm run build

For a React/Vite app: npm install npm run build

Set the deployment subdirectory to match your build output (e.g., dist/, .next/, or build/).

1. Configure your server — go to Servers & Groups and click New Server. Provide your server's connection details (SFTP, SSH, or FTP), credentials, and the deployment path (e.g., /public_html). Unlike Firebase Hosting, you can deploy to any VPS or hosting provider — which typically costs less and gives you more control.

2. Deploy — go to the Deployments tab and trigger your first deployment. DeployHQ will pull the code from GitHub, run the build, and upload the output to your server.

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 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 to your server — no manual steps required.

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:

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.

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 rollback feature to restore the previous version immediately.

Firebase Hosting vs. Self-Hosting: When to Switch

Firebase Hosting is fine for prototypes and small projects. Consider self-hosting with DeployHQ when:

• Traffic is growing and Firebase's usage-based pricing becomes unpredictable
• You need server-level control — cron jobs, custom caching, background workers
• 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

Ready to deploy your Firebase Studio project to your own server? Sign up for DeployHQ and connect your repository in minutes — plans start with a free trial. Check out DeployHQ pricing for details.

Building with other AI tools? See our deployment guides for Lovable, Bolt, Replit, and v0. For AI-assisted coding editors, check out our guides for Cursor, Windsurf, GitHub Copilot, and Cline.

If you have questions, reach out at support@deployhq.com or find us on X at @deployhq.