Firebase Studio provides a collaborative, cloud-based developmentenvironment that simplifies the process of building applications with anextensive combination offrameworks and libraries.

After you set up aFirebase Studio workspace, you can access and share afully-functional, flexible development environment:Firebase Studio workspaces are accessible from any device and provideintegrated tools to streamline you and your team's development process.

Create a workspace

A workspace inFirebase Studio is a development environment thatcontains everything you need to develop your application. It contains yourcode, a code editor (with plugins relevant to your project), and toolchainsthat support app development. It's just like creating a new project in yourlocal desktop development environment, except you have an entire computerand operating system pre-configured and dedicatedexclusively to buildingyour application, running on your browser in the cloud, accessible whereveryou are.

Firebase Studio workspaces are optimized to contain a single codebase,so you can keep the environments and system-level dependencies of differentapplications isolated from each other. You can create multiple workspaces touse with different applications and frameworks.

To create a new workspace:

• Opening a template or sample app.
• Importing a project.
• Prototype with AI, then switch toCode view (</>).

Duplicate a workspace

Duplicating aFirebase Studio workspace creates a copy of your project thatcontains everything within thehome/user directory. This is useful when youwant to experiment with a project without affecting the original, or when youwant to use an existing project as a starting point for a new one.

To duplicate a workspace:

1. From theFirebase Studio homepage,click themore_horiz menu next to theworkspace you want to copy >Duplicate.

2. Enter the name of your new workspace and clickDuplicate. The newworkspace is created and added to your list of workspaces.ßNote: Duplicating larger workspaces can take several minutes. If your newworkspace doesn't load, wait 5 minutes, then refresh the page.

3. (Optional) If the original workspace has a linked Firebase project,consider creating a separate Firebase project for your new workspace. Thisprevents your new workspace from making changes to the Firebase projectlinked to your original workspace. To create a Firebase project:

   1. Open the new workspace and askGemini to create aFirebase project for you.
   2. Update any files that reference the Firebase project, such as.env or.firebaserc.

Configure your workspace

Firebase Studio usesNix to define the environment configuration for each workspace. Nix is a purelyfunctional package manager and assigns unique identifiers to eachdependency, which ultimately means your environment can contain multipleversions of the same dependency, seamlessly. It is also reproducible anddeclarative. In the context ofFirebase Studio, this means you canshare your Nix configuration file across workspaces to load the sameenvironment configuration. Learn more aboutNix +Firebase Studio.

Create or edit the.idx/dev.nix file

Environment configuration is defined in the.idx/dev.nix file in your coderepository. This file specifies all of the components to be added to yourworkspace including:

• System toolsavailable from theNix package registry,including compilers, packages (likego orangular), and command lineutilities, like extragcloud CLI components.

• IDE extensions from theOpenVSX registry, likelanguage-specific debuggers, code formatters, official extensions for cloudservices, and more.

• Common services, likedocker, Pub/Sub messaging, databases like Postgres and Redis, andmore.

See the following example.idx/dev.nix file for a basic workspace environmentconfiguration that enables app previews inFirebase Studio:

{ pkgs,...}:{# Which nixpkgs channel to use.channel="stable-23.11";# or "unstable"# Use https://search.nixos.org/packages to find packagespackages=[    pkgs.nodejs_20];# Sets environment variables in the workspaceenv={SOME_ENV_VAR="hello";};# Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"  idx.extensions=["angular.ng-template"];# Enable previews and customize configuration  idx.previews={enable=true;previews={web={command=["npm""run""start""--""--port""$PORT""--host""0.0.0.0""--disable-host-check"];manager="web";# Optionally, specify a directory that contains your web app# cwd = "app/client";};};};}

Apply new configuration

Any time you add or update thedev.nix configuration file,Firebase Studioshows a prompt in the bottom-right corner toRebuild the environment.The time it takes to rebuild the environment depends on the number of packagesyour configuration needs.

Debug environment build failures

Because configuration files are machine-readable code, they can haveerrors. If this happens, the environment may fail to build and not start.Firebase Studio displays an option to start aRecovery environment.This workspace doesn't include any of the configuration you've defined andjust runs basicCode OSS. This gives you the chance to fix errors in yourdev.nix configuration file and rebuild the environment.

Next steps

• Customize yourFirebase Studio workspace.

• Create custom templates to use and share.

• Share your workspace.

• Use an "Open inFirebase Studio" button to share your workspaceconfiguration or custom template.