About Firebase Studio workspaces

Firebase Studio provides a collaborative, cloud-based development environment that simplifies the process of building applications with an extensive combination of frameworks and libraries.

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

Create a workspace

A workspace in Firebase Studio is a development environment that contains everything you need to develop your application. It contains your code, a code editor (with plugins relevant to your project), and toolchains that support app development. It's just like creating a new project in your local desktop development environment, except you have an entire computer and operating system pre-configured and dedicated exclusively to building your application, running on your browser in the cloud, accessible wherever you are.

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

To create a new workspace:

Configure your workspace

Firebase Studio uses Nix to define the environment configuration for each workspace. Nix is a purely functional package manager and assigns unique identifiers to each dependency, which ultimately means your environment can contain multiple versions of the same dependency, seamlessly. It is also reproducible and declarative. In the context of Firebase Studio, this means you can share your Nix configuration file across workspaces to load the same environment configuration. Learn more about Nix + Firebase Studio.

Create or edit the .idx/dev.nix file

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

See the following example .idx/dev.nix file for a basic workspace environment configuration that enables app previews in Firebase Studio:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    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 the dev.nix configuration file, Firebase Studio shows a prompt in the bottom-right corner to Rebuild the environment. The time it takes to rebuild the environment depends on the number of packages your configuration needs.

Debug environment build failures

Because configuration files are machine-readable code, they can have errors. If this happens, the environment may fail to build and not start. Firebase Studio displays an option to start a Recovery environment. This workspace doesn't include any of the configuration you've defined and just runs basic Code OSS. This gives you the chance to fix errors in your dev.nix configuration file and rebuild the environment.

Next steps