Firebase Studio lets you to tailor your workspace to your project'sunique needs by defining a single.idx/dev.nix configuration file thatdescribes:

• Thesystem tools that you need to be able to run (for example, from theTerminal), such as compilers or other binaries.
• Theextensions you need installed (for example, programming languagesupport).
• How yourapp previews should show up (forexample, the commands to run your web server).
• Globalenvironment variables available to local servers running in yourworkspace.

See thedev.nix reference for a completedescription of what's available.

Nix andFirebase Studio

Firebase Studio usesNix to definethe environment configuration for each workspace. Specifically,Firebase Studio uses:

• TheNix programming language to describe workspace environments. Nix is a functional programminglanguage. The attributes and package libraries you can define in thedev.nix file follow theNix attribute setsyntax.

• TheNix package manager to manage the system tools available to your workspace. This is similar toOS-specific package managers such as APT (apt andapt-get), Homebrew(brew), anddpkg.

Because Nix environments are reproducible and declarative, in the context ofFirebase Studio, this means you can share your Nix configuration fileas part of your Git repository to ensure everyone who works on your projecthas the same environment configuration.

A basic example

The following example shows a basic environment configuration enabling previews:

{ 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";};};};}

Add system tools

To add system tools to your workspace, such as compilers or CLI programs forcloud services,find the unique package ID in the Nix packageregistry and add it to yourdev.nix file'spackages object, prefixed with `pkgs.:

{ pkgs,...}:{# Which nixpkgs channel to use.channel="stable-23.11";# or "unstable"# Use https://search.nixos.org/packages to find packagespackages=[pkgs.nodejs_20];...}

This is different from how you might typically install system packages usingOS-specific package managers such as APT (apt andapt-get), Homebrew(brew), anddpkg. Declaratively describing exactly which system packages areneeded meansFirebase Studio workspaces are easier to share and reproduce.

Just like on your local machine, binaries related to locally installed nodepackages (for example, packages defined in yourpackage.json) can beexecuted in a Terminal panel by invoking them with thenpx command.

As an additional convenience, if you're in a directory with anode_modulesfolder (such as the root directory of a web project), locally installed binariescan be invoked directly, without thenpx prefix.

Addgcloud components

A default configuration of thegcloud CLI forGoogle Cloud isavailable to allFirebase Studio workspaces.

If you need additional components, you can add them to yourdev.nix file:

{ pkgs}:{packages=[...(pkgs.google-cloud-sdk.withExtraComponents[      pkgs.google-cloud-sdk.components.cloud-datastore-emulator])...];}

Add IDE extensions

You can install extensions inFirebase Studio using theOpenVSX extension registry in two ways:

• Use theExtensions panel inFirebase Studio to discoverand install extensions. This approach is best foruser-specificextensions, such as:

  • Custom color themes
  • Editor emulation, like VSCodeVim

• Add extensions to yourdev.nix file. These extensions will beautomatically installed when you share your workspace configuration. Thisapproach is best forproject-specific extensions, such as:

  • Programming language extensions, including language-specific debuggers
  • Official extensions for cloud services used in your project
  • Code formatters

For the latter approach, you can include IDE extensions in yourdev.nix fileby finding the fully-qualified extension ID (of the form<publisher>.<id>) and adding it to theidx.extensionsobject like so:

{ pkgs,...}:{...# Search for the extensions you want on https://open-vsx.org/ and use the format# "<publisher>.<id>"  idx.extensions=["angular.ng-template"];...}

Add common services

Firebase Studio also offers simplified setup and configuration forcommon services you may need during development, including:

• Containers
  • Docker (services.docker.*)
• Messaging
  • Pub/Sub Emulator (services.pubsub.*)
• Databases
  • MySQL (services.mysql.*)
  • Postgres (services.postgres.*)
  • Redis (services.redis.*)
  • Spanner (services.spanner.*)

For details on enabling these services in your workspace, see theservices.*portions of thedev.nix reference.

Customize previews

For details on how to customize your app previews, seePreview yourapp.

Set your workspace icon

You can choose a custom icon for your workspace by placing a PNG file namedicon.png inside the.idx directory at the same level as yourdev.nix file.Firebase Studio will then use this icon to represent your workspace in yourdashboard.

Because this file can be checked into source control (such as Git), this is agood way to help everyone who works on your project see the same icon for yourproject when usingFirebase Studio. And because the file can vary acrossGit branches, you can use this icon to visually distinguish between betaand production app workspaces and for other purposes.

Turn your customizations into a template

To turn your environment configuration into a "starter environment" that anyonecan use to build new projects, see the docs forCreate customtemplates.

Explore all customization options

Check out thedev.nix reference for adetailed description of the environment configuration schema.

Download your files

To download your files as a zip file:

• Right-click on any directory in the Explorer pane and selectZip and Download.

To download everything in your project directory:

1. SelectFile > Open Folder.

2. Accept the default/home/user directory.

3. After the files load, right-click your working directory and selectZip and Download. If usingtheApp Prototyping agent, your working directory will bestudio. Ifusing a template or uploaded project, this will be your project name.

4. When prompted to rebuild the environment, clickCancel.

5. After your download completes, re-open your working directory from theFile menu to move back into your workspace.

Next steps

• Integrate with Firebase and Googleservices.
• Create custom templates.
• Add an Open inFirebase Studiobutton.
• Learn more aboutFirebase Studio workspaces.